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

Posted 2020-06-08

图片懒加载插件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事件，例如click和mouseover。也可以使用自定义事件。

$("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

});