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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
php实现rc4加密算法代码
2012/04/25 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
Javascript中引用示例介绍
2014/02/21 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
Javascript的比较汇总
2016/07/25 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
如何更优雅地写python代码
2019/07/02 Python
django的autoreload机制实现
2020/06/03 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
医学生实习自我鉴定
2013/09/27 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技