jquery.lazyload  实现图片延迟加载jquery插件


Posted in Javascript onFebruary 06, 2010

什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

怎么实现ImageLazyLoad

一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小)

在线压缩js http://closure-compiler.appspot.com/home
虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下:

1.导入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript:

$("img").lazyload();

这将会使所有的图片都延迟加载。

当然插件还有几个配置项可供设置。

1.改变threshold

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
});

3.可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
});

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;
缺陷:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad

大家可以直接采用淘宝的延迟加载技术:(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
调用方法也是很简单的:
<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>
注:该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

配置参数如下:

<script type="text/javascript"> 
KISSY.ImageLazyload({ 
mod: "manual", // 延迟模式。默认为 auto 
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载 
}); 
</script>

manual 模式时,需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面,宝贝列表的后20个图片延迟加载。 输出时,html 代码为:

<img data-lazy-src="path/to/img" alt="something" />

如果您是Jquery,Prototype等这些JS框架的粉丝,他们都有定制的LazyLoad Plugin提供;

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致;

Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 #Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
py2exe 编译ico图标的代码
2013/03/08 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python3 replace()函数使用方法
2018/03/19 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python构造IP报文实例
2020/05/05 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
年会搞笑主持词
2014/03/27 职场文书
安全标语口号
2014/06/09 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年部门工作总结
2014/11/12 职场文书
罚款通知怎么写
2015/04/22 职场文书
人民的好儿女观后感
2015/06/18 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers