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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
iconfont的三种使用方式详解
Aug 05 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简单封装了一些常用JS操作
2007/02/25 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Python完全新手教程
2007/02/08 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
局域网定义和特性
2016/01/23 面试题
贯彻学习两会心得体会范文
2014/03/17 职场文书
学习教师法的心得体会
2014/09/03 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Python实现学生管理系统(面向对象版)
2021/06/24 Python