jquery 懒加载插件jquery.lazyload.js

懒加载插件 jquery.lazyload.js

打开一个页面，有很多图片，不可能一次加载完毕，而是滚动到哪个位置再进行加载，这是用来做性能优化的。

1.导入JS插件(前提有 jquery.lazyload.js 文件)

<script src="js\jquery.lazyload.js" type="text/javascript"></script>

2. 需要进行懒加载的图片上要添加选择器：lazy

然后添加方法：lazyload()

$("img.lazy").lazyload();

3.设置敏感度区域

插件提供了 threshold 选项

$("img").lazyload({ threshold : 200 })

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片

参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4. 还有涉及到 高级应用，触发事件，多参数等等。

如：图片加载时的渐变效果：

$("img.lazy").lazyload(){
  effect:"fadeIn";
}