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 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js函数排序的实例代码
Jul 01 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Javascript之String对象详解
2016/06/08 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python爬取成语接龙类网站
2018/10/19 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python如何删除文件、目录
2020/06/23 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
天鹅湖观后感
2015/06/09 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书