网页图片延时加载的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 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
0基础学习前端开发的一些建议
Jul 14 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
一个简单的PHP&MYSQL留言板源码
2020/07/19 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
jquery中获取id值方法小结
2013/09/22 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vuex存储token示例
2019/11/11 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
西部世纪面试题
2014/12/05 面试题
班主任工作年限证明
2014/01/12 职场文书
人事主管岗位职责
2014/01/30 职场文书
医药营销个人求职信
2014/04/12 职场文书
申论倡议书范文
2014/05/13 职场文书
毕业生求职信范文
2014/06/29 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
美丽心灵观后感
2015/06/01 职场文书
校运会宣传稿大全
2015/07/23 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers