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中的作用域scope介绍
Dec 28 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
如何使用vue slot创建一个模态框的实例代码
May 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
基于mysql的bbs设计(三)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
.net工程师笔试题
2012/06/09 面试题
购房协议书范本
2014/04/11 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
离职报告格式
2014/11/04 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
导游词之神仙居景区
2019/11/15 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
vue实现同时设置多个倒计时
2021/05/20 Vue.js
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python