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" > |
|