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 相关文章推荐
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
详解JS预解析原理
Jun 16 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Vue的Options用法说明
2020/08/14 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python判断两个对象相等的原理
2017/12/12 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python生成特定分布数的实例
2019/12/05 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
英语自荐信常用语句
2013/12/13 职场文书
护士辞职信模板
2014/01/20 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
小学新教师个人总结
2015/02/05 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
教你使用TensorFlow2识别验证码
2021/06/11 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
MySQL数据库 安全管理
2022/05/06 MySQL