神马文学网艾奇视觉设计-运用ImageLazyLoad实现图片的延迟加载技术
来源：百度文库 编辑：神马文学网 时间：2024/05/01 19:06:24
运用ImageLazyLoad实现图片的延迟加载技术
[ At 2010-1-27 By sj27 Add comments] 如果留意淘宝的话,应该可以注意到:当打开产品页面后，并不是把页面中图片都下载下来,而是随着滚动条的滚动而加载图片.这样可以使页面载入速度更快,节省网站流量,减少服务器的负载.你可以灵活的把这一技术运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等……( 我的博客列表页图片的展示也采用相同的技术)
也许你还是一头雾水,别着急接着往下看:
什么是ImageLazyLoad技术
在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
怎么实现ImageLazyLoad
在页脚添加以下代码即可：
大家可以直接采用淘宝的延迟加载技术：
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
调用方法也是很简单的：
注：该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x,你也可以直接引用下面的地址:
至于高级配置，大家可以看这里;
配置参数如下：
manual 模式时，需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面，宝贝列表的后20个图片延迟加载。输出时，html 代码为：
如果您是Jquery，Prototype等这些JS框架的粉丝，他们都有定制的LazyLoad Plugin提供；
可查看http://www.appelsiini.net/projects/lazyload
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；