lazyload简单用法  

2012-05-28 15:05:45|  分类： 工作笔记 |  标签：lazyload  lazyload用法  lazyload问题  延迟加载  只加载首屏   |字号 订阅

上周做团购的东西，图文列表特别长，页面加载慢，就想学着淘宝等大网站做个延迟加载效果。具体描述就是，页面首次加载时除首屏内图片，其它暂不加载，等用户向下拖动滚动条时触发事件，加载相应范围内图片。jQuery有款插件lazyload正适合我的需求，拿来试下效果不错！下面把简单用法和要注意的问题分享下：

 

HTML：

<img 

    src="img/grey.gif" 

    data-original="http://www.baidu.com/img/baidu_jgylogo3.gif" 

    width="100" 

    height="120"

/>

1. src属性值为占位图地址

2. 原图地址存放在 "data-original" 属性中，待需赋还给src

3. 图片最好要加宽度、高度属性

JS：

<script type="text/javascript" src="../js/jquery1.7.js"></script>

<script type="text/javascript" src="../js/LazyLoad.js"></script>

<script type="text/javascript" >