轻量级和强大的 jQuery 图像延迟加载插件 -lazyload

版本:

浏览量:1250

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

lazyload 是一个简单、轻量级但功能强大的 jQuery 插件，它在您的网页上提供图像延迟加载功能，具有以下功能：

易于实施。
适用于 jQuery 或 Zepto。
支持本地图片、ajax图片和背景图片。
很多选项可以自定义。
跨浏览器。支持 IE6/7。

基本用法：

1. 在您的网页底部包含 jQuery 库和 jQuery lazyload 插件的脚本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="lazyload.js"></script>

2. 在您的网页中插入您希望延迟加载的图像。使用data-original属性来定义图像的来源。

<img class="lazy" data-original="demo-1.jpg" width="" height="" alt="Demo">
<img class="lazy" data-original="demo-2.jpg" width="" height="" alt="Demo">
<img class="lazy" data-original="demo-3.jpg" width="" height="" alt="Demo">
...

3. 调用图片功能启用插件。

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

4. 选项和默认值。

threshold : 0,
failure_limit: 0,
event  : 'scroll', // jquery events
effect : 'show', // show or fadein
effect_params: null,
container : w,
data_attribute  : 'original',
skip_invisible  : true,
appear : emptyFn,
load: emptyFn,
vertical_only: false,
minimum_interval: 300,
use_minimum_interval_in_ios : false,
url_rewriter_fn : emptyFn,
no_fake_img_loader : false,
placeholder_data_img  : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
// for IE6\7 that does not support data image
placeholder_real_img  : 'placeholder.png'