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 相关文章推荐
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
DOM事件探秘篇
Feb 15 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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
多重?l件?合查?(二)
2006/10/09 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
jQuery插件开发的五种形态小结
2015/03/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
会计系中文个人求职信
2013/12/24 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
民政局个人整改措施
2014/09/24 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
银行授权委托书范本
2014/10/04 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
Python深度学习之Pytorch初步使用
2021/05/20 Python
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android