繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery.lazyload 实现图片延迟加载jquery插件
- Javascript
- 编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
- JS Array对象入门分析
- javascript typeof的用法与typeof运算符介绍[详细]
- js CSS操作方法集合
- 让任务管理器中的CPU跳舞的js代码
- ajax无刷新动态调用股票信息(改良版)
- js Clip的奇思妙想之文字拼接效果
- js Clip奇思妙想之多彩渐变字效果
- JS 创建对象(常见的几种方法)
- JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
- JS提交并解析后台返回的XML的代码
- 初学Javascript的一些总结
- JS 继承实例分析
- js form action动态修改方法
- 仿163填写邮件地址自动显示下拉（无优化）
- js判断对象是否是某一类型
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
- js 目录列举函数
- js颜色选择器代码[firefox不支持]
- js wmp操作代码小结(音乐连播功能)
Javascript 中的 jquery.lazyload 实现图片延迟加载jquery插件
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 337 ::
收藏到网摘: n/a
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了，也减轻了服务器的压力，就查了下用JQuery..
什么是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技术运用的淋漓尽致；
评论 (0) All
