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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
JavaScript实现贪吃蛇游戏
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php动态添加url查询参数的方法
2015/04/14 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
python3将变量输入的简单实例
2020/08/19 Python
python爬虫如何解决图片验证码
2021/02/14 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
SQL Server实现分页方法介绍
2022/03/16 SQL Server