jQuery lazyLoad图片延迟加载插件的优化改造方法分享


Posted in Javascript onAugust 13, 2013

jQuery lazyLoad.js插件 是一款基于jquery框架,可以“实现”图片延迟加载的插件。请注意,我用了双引号,因为从我自己实际调试的结论来说呢,并不会延迟加载,而是先下载,然后通过改变<img>的src属性来隐藏原来的图片。
我们先来看看他的代码吧!

<script type="text/javascript" src="/static/jssrc/lazyload.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#team_main_side img").lazyload({ 
placeholder : "/static/theme/xituan/img/img_loading.gif", 
effect : "fadeIn" 
}); 
}); 
</script>

工作原理是先在<img>下创建original属性,并把src属性值赋值给original,然后再把src的值修改成你设置的 placeholder的值。当滚动条到达图片位置时,再把original的属性赋值给src。这个时候向服务器发出一个HTTP请求,确认下有没有修 改,服务器返回一个304状态,等于本来一遍HTTP请求能完成的工作,它用了2遍,非但没有减少开支,还增加开销,我彻底无语了。(如下图,火狐的firebug显示)

jQuery lazyLoad图片延迟加载插件的优化改造方法分享

假如你使用过这个插件的话,你有没有发现,无论多大的图片,只要你的滚动条到达那个位置的话,图片就会很快的显示出来,有点不可思议吧。那是因为那张图片已经下载好了。
再者,我自己的想法,jquery的代码是在页面加载完成后才会执行的,那页面加载完的时候,图片较小的都下载完了,再执行jq代码的话,那种意义就不存在了。

那有问题肯定要解决,把这个插件的代码改一改。

好吧,开始了

打开这个jquery.lazyLoad.js,找到如下图第一个红框的代码,直接注释掉;第二个红框是需要自己手工添加上去的,然后保存。

jQuery lazyLoad图片延迟加载插件的优化改造方法分享

在页面插入图片的代码如
<img src="http://3water.com/upload/201010122047211034.jpg" alt=""/>
修改成
<img original="http://3water.com/upload/201010122047211034.jpg" src="http://3water.com/img/img_loading.gif" alt=""/>

最后记得插入js代码

[code]
<script type="text/javascript" src="/js/jquery.js"></script><!--jquery 包-->
<script type="text/javascript" src="/js/jquery.lazyload.js"></script><!--lazyload 插件-->
<script type="text/javascript"> //初始化代码
$(document).ready(function(){
$("#team_main_side img").lazyload({
placeholder : "http://3water.com/img/img_loading.gif",
effect : "fadeIn"
});
});
</script>

这样所有图片就都显示img_loading.gif了,由于都是请求的同一个图片,浏览器只会请求一次..对于减少服务器http请求来说,我们的目标已经达到了.当浏览器滚动到图片的位置时候,就会把图片加载进来。

Javascript 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
AngularJS自动表单验证
Feb 01 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 #Javascript
JavaScript解析URL参数示例代码
Aug 12 #Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 #Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 #Javascript
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Move.js入门
2017/02/08 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python3多线程操作简单示例
2018/05/22 Python
详解Django的CSRF认证实现
2018/10/09 Python
python增加图像对比度的方法
2019/07/12 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
给校长的建议书100字
2014/05/16 职场文书
食品流通安全承诺书
2014/05/22 职场文书
国防教育标语
2014/10/08 职场文书
幼儿教师个人总结
2015/02/05 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
公司酒会致辞
2015/07/30 职场文书
校园广播稿范文
2015/08/19 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python