js图片延迟技术一般的思路与示例


Posted in Javascript onMarch 20, 2014

图片延迟技术一般的思路

1.现将img元素对应的src路径设置为背景图片,而该img所对应的url路径存放在一个自设的属性中(以便进行src替换)。

2.获取卷轴的高度和窗口的高度

3循环需要延迟加载的img数组,获取img的高度,判断该元素是否在可视窗口内。若该元素在可视窗口内,则进行src替换

一下为测试代码

html

<style> 
.wrap { 
margin: 20px auto; 
width: 150px; 
} 
.wrap div { 
border: 1px dotted #E29808; 
height: 30px; 
line-height: 30px; 
margin: 5px auto; 
text-align: center; 
width: 150px; 
} 
.wrap .sortable { 
background-color: #E6D6AB; 
border: 1px solid #E29808; 
} 
#showImg li{ 
width:30%; 
margin-left:2%; 
margin-top:15px; 
height:300px; 
float:left; 
background:#CCC; 
} 
#showImg li:nth-child(3n){ 
margin-left:3%; 
} 
#showImg li img{ 
width:100%; 
max-height:100%; 
} 
</style> 
</head> <body> 
<div id="showImg"> 
<li><img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt="test" /></li> 
<li><img src="http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg" alt="test" /></li> 
<li><img src="http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg" alt="test" /></li> 
</div> 
</body>

js部分
var imgsglobal=[ 
"http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_0.jpeg", 
"http://img4.duitang.com/uploads/item/201306/07/20130607172438_Teijr.jpeg", 
"http://cdn.duitang.com/uploads/item/201306/08/20130608190311_BYwcA.thumb.600_0.jpeg", 
"http://g-ec4.images-amazon.com/images/G/28/BOOK-Catalog/Liaoxiaojun/B003U5TATY_01_AMZN.jpg", 
"http://www.yishun.net/tuysL3R1eXNpbWcwNC50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2k0Lzc0MDY1MDAzMi9UMl9HbmVYanRhWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg", 
"http://www.yishun.net/tuysL3R1eXNpbWcwMy50YW9iYW9jZG4uY29tL2ltZ2V4dHJhL2kzLzc0MDY1MDAzMi9UMkVHbF9YaVhjWFhYWFhYWFhfISE3NDA2NTAwMzIuanBn.jpg", 
"http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg", 
"http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg", 
"http://img4.duitang.com/uploads/item/201112/04/20111204170801_fiBKm.jpg", 
"http://img2.duitang.com/uploads/item/201211/06/20121106233027_LdQaS.thumb.600_0.jpeg", 
"http://i2.sinaimg.cn/gm/2011/0127/U5238P115DT20110127111837.jpg", 
"http://img2.duitang.com/uploads/item/201209/24/20120924162953_hLPJe.jpeg", 
"http://wenwen.soso.com/p/20110624/20110624085901-745594320.jpg", 
"http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg", 
"http://img4.duitang.com/uploads/item/201202/11/20120211213039_U4Sj8.thumb.600_0.jpg", 
"http://cdn.duitang.com/uploads/item/201201/25/20120125145922_n4Vz8.thumb.600_0.jpg" 
]; 
function addImgEle(){ 
var str=''; 
for(var i=0, len=imgsglobal.length; i<len; i++){ 
str+='<li><img class="lazyImg" src="wait" resrc="'+imgsglobal[i]+'" /></li>' 
} 
$("#showImg").append(str); 
} 
$(document).ready(function(){ 
addImgEle(); 
}); 
(function(win){ 
var lazyLoad=win['lazyLoad']||{}; 
var camelize = function (s) { 
return s.replace(/-(\w)/g, function (strMatch, p1) { 
return p1.toUpperCase(); 
}); 
}; 
lazyLoad={ 
init:function(ImgClass){ 
var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop, 
offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight); 
var Imgeles=ImgClass; 
for(var i=0, len=Imgeles.length; i<len; i++){ 
if(Imgeles[i].getAttribute("resrc")=="show"){ 
continue; 
} 
var o=Imgeles[i]; 
if(o){ 
postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop +window.document.body.scrollTop; 
postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', '')); 
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)){ 
var src=o.getAttribute("resrc"); 
o.setAttribute("src", src); 
o.setAttribute("resrc", "show"); 
} 
} 
} 
}, 
getStyle:function (element, property) { 
if (arguments.length != 2) return false; 
var value = element.style[camelize(property)]; 
if (!value) { 
if (document.defaultView && document.defaultView.getComputedStyle) { 
var css = document.defaultView.getComputedStyle(element, null); 
value = css ? css.getPropertyValue(property) : null; 
} else if (element.currentStyle) { 
value = element.currentStyle[camelize(property)]; 
} 
} 
return value == 'auto' ? '' : value; 
} 
} 
win.lazyLoad=lazyLoad; 
})(window); 
$(document).ready(function(){ 
lazyLoad.init($("img.lazyImg")); 
window.onscroll=function (){ 
lazyLoad.init($("img.lazyImg")); 
} 
});
Javascript 相关文章推荐
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Node.js实现数据推送
Apr 14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
可恶的ie8提示缺少id未定义
Mar 20 #Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 #Javascript
js拖拽一些常见的思路方法整理
Mar 19 #Javascript
使用jquery实现以post打开新窗口
Mar 19 #Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 #Javascript
改变隐藏的input中value值的方法
Mar 19 #Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 #Javascript
You might like
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
Javascript验证方法大全
2015/09/21 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
javascript事件模型介绍
2016/05/31 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
js实现返回顶部效果
2017/03/10 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
经典c++面试题三
2015/07/08 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
安全教育的主题班会
2015/08/13 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python