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 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
分类解析jQuery选择器
Nov 23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
vue中各种通信传值方式总结
Feb 14 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
pytorch 模型可视化的例子
2019/08/17 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python求凸包及多边形面积教程
2020/04/12 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
业务经理的岗位职责
2013/11/16 职场文书
食品业务员岗位职责
2014/03/18 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
小学生环保标语
2014/06/13 职场文书
保安辞职信范文
2015/02/28 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技