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 插件开发方法小结
Oct 23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
layui清空,重置表单数据的实例
Sep 12 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中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python中super的用法实例
2015/05/28 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python中time库的实例使用方法
2019/10/31 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
python自定义函数def的应用详解
2020/06/03 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
服务员岗位责任制
2014/02/11 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python