jQuery图片延迟加载插件

在一些图片较多的页面上，如果图片都一起加载网页的速度会比较慢，而且也浪费流量。

使用图片延时加载插件就解决这些问题。

方法：

引入jquery和插件文件

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

图片代码设置

<img class="lazy" src="未加载前的图片地址" original="要显示的图片地址">

js调用

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

Lazyload属性：

threshold：值为number，图片离屏幕多少像素时开始提前加载；

event：值为String，使图片显示的事件，支持jQuery的所有事件，也可以是自定义事件。如：设置event为click，则需要点击占位符图片才能让图片显示；

effect：值为String，图片显示的效果，默认值为show。支持jQuery的fadeIn, slideDown；

container：值为String，使某容器内的使用延迟加载，容器内需要有滚动条；

 

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