网页图片延时加载的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 相关文章推荐
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
js模糊查询实例分享
Dec 26 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
小程序实现录音功能
Sep 22 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
jQuery实现增删改查
Dec 22 jQuery
基于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
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP文件操作实例总结
2016/09/27 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python Grid使用和布局详解
2018/06/30 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
大学生应聘求职信
2014/05/26 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
班级出游活动计划书
2014/08/15 职场文书
会计工作检讨书
2015/02/19 职场文书
学生保证书格式
2015/02/27 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
推广普通话主题班会
2015/08/17 职场文书
2016年党建工作简报
2015/11/26 职场文书
高三语文教学反思
2016/02/16 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书