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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
可恶的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中in_array函数用法探究
2014/11/25 PHP
Smarty模板语法详解
2019/07/20 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
python字符串替换示例
2014/04/24 Python
Python算法之图的遍历
2017/11/16 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
社区服务活动总结
2014/05/07 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
奔腾年代观后感
2015/06/09 职场文书
工作证明格式范文
2015/06/15 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS