一段实现页面上的图片延时加载的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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python字符串处理实现单词反转
2017/06/14 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python递归实现快速排序
2018/08/18 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python tornado修改log输出方式
2019/11/18 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
python中常见错误及解决方法
2020/06/21 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
劲霸男装广告词改编版
2014/03/21 职场文书
2014年老干部工作总结
2014/11/21 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
热爱劳动主题班会
2015/08/14 职场文书