jquery插件lazyload.js延迟加载图片的使用方法

下面是详细的jQuery插件lazyload.js延迟加载图片的使用方法攻略。

简介

lazyload.js是一款轻量级的jQuery插件，可以帮助网站实现图片的延迟加载，减少网站的加载时间。该插件使用非常简单，只需引入js文件并初始化即可。

安装

使用lazyload.js需要在HTML页面中引入jQuery库和lazyload.js文件，具体代码如下：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/lazyload.min.js"></script>
</head>

使用方法

基本使用

在页面中需要延迟加载的图片标签中添加 data-original属性，属性值为需要加载的图片地址。然后使用 lazyload() 方法初始化插件即可。

<img data-original="image1.jpg" alt="">
<img data-original="image2.jpg" alt="">
<img data-original="image3.jpg" alt="">

$(function() {
    $("img").lazyload();
});

高级用法

lazyload.js提供了丰富的API和参数设置，可以满足更多复杂的需求。

参数设置

threshold：设置距离可视区域多少距离时开始加载。默认值为0，表示图片完全进入可视区域时才开始加载。
placeholder：设置占位图，即未加载完成时显示的图片。可以是图片地址或者base64编码。默认值为插件自带的透明图片。
effect：设置图片加载效果，该参数支持的值有：fadeIn、show和null。默认值为show。
effectTime：设置图片加载效果的时间，单位为毫秒，默认值为400。

$("img").lazyload({
    threshold : 200, // 距离可视区域200px时开始加载
    placeholder: "images/loading.gif", // 自定义占位图
    effect: "fadeIn", // 加载图片时使用fade效果
    effectTime: 800 // 加载图片效果的时间设置为800毫秒
});

事件监听

load：当图片被加载成功时触发。
error：当图片加载失败时触发。

$("img").lazyload({
    load: function() { 
        console.log("图片加载成功");
    },
    error: function() { 
        console.log("图片加载失败");
    }
});

示例说明

示例1：基本使用

在页面中添加以下代码：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/lazyload.min.js"></script>
</head>

<body>
    <img src="images/placeholder.gif" data-original="images/image1.jpg" alt="">
    <img src="images/placeholder.gif" data-original="images/image2.jpg" alt="">
    <img src="images/placeholder.gif" data-original="images/image3.jpg" alt="">

    <script>
        $(function(){
          $("img").lazyload();
        });
    </script>
</body>

这里我们使用了默认设置，不传入任何参数，当页面加载完成后，图片并未完全加载，只有当页面滚动到相应位置时才会加载。

示例2：高级用法