网页图片延时加载的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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
js中call与apply的用法小结
Dec 28 Javascript
js轮播图代码分享
Jul 14 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
jQuery异步提交表单实例
May 30 jQuery
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python Celery定时任务的示例
2018/03/13 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
三年级数学教学反思
2014/01/31 职场文书
2014年安全员工作总结
2014/11/13 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
vue实现列表垂直无缝滚动
2022/04/08 Vue.js