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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JavaScript模拟push
Mar 06 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
koa+jwt实现token验证与刷新功能
May 30 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调用数据库的存贮过程!
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
Cookie 小记
2010/04/01 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python使用super()出现错误解决办法
2017/08/14 Python
Django视图和URL配置详解
2018/01/31 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python使用udp实现聊天器功能
2018/12/10 Python
python http基本验证方法
2018/12/26 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
String和StringBuffer的区别
2015/08/13 面试题
诚信考试倡议书
2014/04/15 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
保护地球的标语
2014/06/17 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
十八大宣传标语
2014/10/09 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android