一段实现页面上的图片延时加载的js代码


Posted in Javascript onFebruary 11, 2010

相关地址:
http://list.taobao.com/browse/30-50029375/n-1----------------------0---------yes-------g,ge3denzxhazdumzsgy3tsnzq-----------------------42-grid-commend-0-all-50029375.htm?TBG=14153.14.7&ssid=r18-s18

http://shop.qq.com/shopList.html
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的。
实现原理

把所有需要延时加载的图片改成如下的格式:

<img lazy_src="图片路径" border="0"/>

然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片)

代码

lazyLoad=(function() { 
var map_element = {}; 
var element_obj = []; 
var download_count = 0; 
var last_offset = -1; 
var doc_body; 
var doc_element; 
var lazy_load_tag; 
function initVar(tags) { 
doc_body = document.body; 
doc_element = document.compatMode == 'BackCompat' ? doc_body: document.documentElement; 
lazy_load_tag = tags || ["img", "iframe"]; 
}; 
function initElementMap() { 
var all_element = []; 
//从所有相关元素中找出需要延时加载的元素 
for (var i = 0, 
len = lazy_load_tag.length; i < len; i++) { 
var el = document.getElementsByTagName(lazy_load_tag[i]); 
for (var j = 0, 
len2 = el.length; j < len2; j++) { 
if (typeof(el[j]) == "object" && el[j].getAttribute("lazy_src")) { 
element_obj.push(all_element[key]); 
} 
} 
} for (var i = 0, 
len = element_obj.length; i < len; i++) { 
var o_img = element_obj[i]; 
var t_index = getAbsoluteTop(o_img);//得到图片相对document的距上距离 
if (map_element[t_index]) { 
map_element[t_index].push(i); 
} else { 
//按距上距离保存一个队列 
var t_array = []; 
t_array[0] = i; 
map_element[t_index] = t_array; 
download_count++;//需要延时加载的图片数量 
} 
} 
}; 
function initDownloadListen() { 
if (!download_count) return; 
var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop: doc_element.scrollTop; 
//可视化区域的offtset=document的高+ 
var visio_offset = offset + doc_element.clientHeight; 
if (last_offset == visio_offset) { 
setTimeout(initDownloadListen, 200); 
return; 
} 
last_offset = visio_offset; 
var visio_height = doc_element.clientHeight; 
var img_show_height = visio_height + offset; 
for (var key in map_element) { 
if (img_show_height > key) { 
var t_o = map_element[key]; 
var img_vl = t_o.length; 
for (var l = 0; l < img_vl; l++) { 
element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src"); 
} 
delete map_element[key]; 
download_count--; 
} 
} 
setTimeout(initDownloadListen, 200); 
}; 
function getAbsoluteTop(element) { 
if (arguments.length != 1 || element == null) { 
return null; 
} 
var offsetTop = element.offsetTop; 
while (element = element.offsetParent) { 
offsetTop += element.offsetTop; 
} 
return offsetTop; 
} 
function init(tags) { 
initVar(tags); 
initElementMap(); 
initDownloadListen(); 
}; 
return { 
init: init 
} 
})();

使用方法:把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面,然后调用:lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外:
如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如:
///切换内容的代码... 
chlid.find("img[init_src]").each(function(){ 
$(this).attr("src",$(this).attr("init_src")); 
$(this).removeAttr("init_src"); 
});
Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
setTimeout学习小结
Feb 08 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 #Javascript
jQuery插件 tabBox实现代码
Feb 09 #Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 #Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
You might like
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP缓冲区用法总结
2016/02/14 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js格式化时间的方法
2015/12/18 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python中创建二维数组
2018/10/17 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
如何基于python操作json文件获取内容
2019/12/24 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
生活部的活动方案
2014/08/19 职场文书
个人总结与自我评价
2015/02/14 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书