网页图片延时加载的js代码


Posted in Javascript onApril 22, 2010

实现原理 

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

网页图片延时加载的js代码

然后在页面加载时,把所有使用了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 key) { var t_o = map_element[key]; var img_vl = t_o.length; for (var l = 0; l

使用方法:把页面上需要延时加载的图片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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
基于jQuery的表格操作插件
Apr 22 #Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 #Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 #Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 #Javascript
基于jquery的超简单上下翻
Apr 20 #Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 #Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 #Javascript
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP的加密方式及原理
2012/06/14 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python 支付整合开发包的实现
2019/01/23 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
商务主管岗位职责
2013/12/08 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
保护野生动物倡议书
2014/05/16 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
退休欢送会主持词
2015/07/01 职场文书
辩论会主持词
2015/07/03 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书