图片懒加载插件lazyload使用方法

时间:2021-10-25 04:42:15

图片懒加载插件lazyload使用方法

一、如何使用:

Lazy Load 依赖于 jQuery。引入文件

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

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

 

图片基本属性的设置

<img class="lazy"  src="img/grey.gif"   alt=""  width="640"  height="480"  data-original="img/example.jpg" />

 

最后使用:

$(function() {

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

});

二、基本选项:

1、设置临界点

默认情况下图片会出现在屏幕时加载如果你想提前加载图片可以设置threshold 选项设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

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

    threshold : 200

});

 

2、设置事件来触发加载

你可以使用jQuery事件,例如clickmouseover。也可以使用自定义事件。

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

    event : "click"

});

 

3、使用特效

默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)。

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

    effect : "fadeIn"

});

4、加载隐藏的图片

 为了提升性能, Lazy Load 默认忽略了隐藏图片如果你想要加载隐藏图片请将 skip_invisible 设为 false

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

    skip_invisible : false

});