LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。

如何使用：LazyLoad依赖于Jquery，在html的结尾处 ,就是在</body>前。

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

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

你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下：

html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />

js:$(function() {

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

})

这会将所有图进行延迟加载

设置临界点

默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold，这个属性的单位是px,不过赋值的时候不用带px ,呵呵。

设置事件来触发加载

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

event : "click"

});

使用特效

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

effect : "fadeIn"

});