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 相关文章推荐
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
小程序实现分类页
Jul 12 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php 文件缓存函数
2011/10/08 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
jQuery is()函数用法3例
2014/05/06 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
深入探密Javascript数组方法
2015/01/08 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python+django快速实现文件上传
2016/10/24 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
美容院考勤制度
2014/01/30 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
车间安全生产标语
2014/06/06 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年招聘工作总结
2014/12/12 职场文书
校车司机安全责任书
2015/05/11 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
MySQL索引是啥?不懂就问
2021/07/21 MySQL
python标准库ElementTree处理xml
2022/05/20 Python
mysql序号rownum行号实现方式
2022/12/24 MySQL