首页 > linux > ImageLazyLoad-图片随着滚动而进行加载

ImageLazyLoad-图片随着滚动而进行加载

2010年1月9日
67 views 评论 发表评论
日志分类linux

这个方法可以减少服务器的负担,随着滚动条的滚动加载图片。可以运用在存在大量图片的页面,比如频道页、活动页、搜索结果页等……

演示:看看taobao的商品列表

http://search.taobao.com/search?commend=all&isnew=2&q=%CA%F3%B1%EA&source=search1

使用说明:

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

<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 代码为:

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

纯净水 linux

  1. 目前还没有任何评论.
  1. 目前还没有任何 trackbacks 和 pingbacks.
  • 粤ICP备09032914号