Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件(2)

[html]
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript> 
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>CSS样式设置:[css]
.lazy { 
  display: none; 
} 
.lazy {
  display: none;
}JS代码:
[javascript]
$("img.lazy").show().lazyload(); 
$("img.lazy").show().lazyload();

设置图片加载的反应距离

Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.

但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.

[javascript]
$("img.lazy").lazyload({ threshold : 200 }); 
$("img.lazy").lazyload({ threshold : 200 });

另外, threshold 可以为正数或者负数.
正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.

如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.

PS:图片和屏幕的距离是根据图片的 top 位置计算.

注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.

通过事件触发加载

可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.

[javascript]
$("img.lazy").lazyload({  
    event : "click" 
}); 
$("img.lazy").lazyload({
    event : "click"
});

实现动画效果

上面的Demo之所以会没有图片加载的效果,是因为Lazy Load默认的图片加载是通过 jQuery 的show()方法来显示,所以图片出现几乎是一瞬间.

当然我们还可以实现其他效果.

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

Demo

另外还可以使用 slideDown() 方法,但效果不佳.
如果想要控制动画的速度,还可以修改 effectspeed 属性.

[javascript]
$("img.lazy").lazyload({  
    effect : "fadeIn", 
    effectspeed : 1000 
}); 
$("img.lazy").lazyload({
    effect : "fadeIn",
    effectspeed : 1000
});effectspeed 属性默认是空的,所以如果不设置它,动画的时间为400毫秒.