艾奇视觉设计-运用ImageLazyLoad实现图片的延迟加载技术
[ At 2010-1-27 By sj27   ]

如果留意淘宝的话,你应该可以注意到:淘宝的图片是随着滚动条的滚动而加载图片,这样可以减少服务器的负担,可以运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等……

什么是ImageLazyLoad技术

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

怎么实现ImageLazyLoad

在页脚添加以下代码即可:

大家可以直接采用淘宝的延迟加载技术:

调用方法也是很简单的: 
<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 type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延迟模式。默认为 auto
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载
});
</script>

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

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

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

  • 相关文章:[查看与     相关的全部文章]
  •   (2009-10-10 12:42:19)

      (2009-7-30 21:7:0)

      (2009-7-5 23:7:1)

      (2009-7-3 13:48:19)

郑重声明:资讯 【艾奇视觉设计-运用ImageLazyLoad实现图片的延迟加载技术】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——