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 相关文章推荐
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
实例讲解React 组件生命周期
Jul 08 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
详细介绍PHP应用提速面面观
2006/10/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python时间日期操作方法实例小结
2020/02/06 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
什么是java序列化,如何实现java序列化
2012/11/14 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
企业宣传工作方案
2014/06/02 职场文书
分公司负责人任命书
2014/06/04 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫