jquery.lazyload 实现图片延迟加载jquery插件

jquery.lazyload 是一款可以实现图片延迟加载的jQuery插件。它可以延迟加载页面上的图片资源，特别是对于页面中存在大量图片或图片较大的网站非常有用，因为在网页加载完成之前可以让图片先显示出来，让用户体验更加流畅。

本文将详细讲解 jquery.lazyload 的使用方法和相关问题。

安装和基本使用

首先需要通过下载或者使用 CDN 的方式引入 jquery 和 jquery.lazyload 的 js 文件。

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

之后，在需要使用延迟加载的图片上添加 data-src 属性，并在 JS 中使用 Lazyload 方法来实现图片的延迟加载。

<img class="lazy" data-src="path/to/image.jpg" alt="image" />

$(function() {
    $("img.lazy").lazyload({
        threshold: 200, // 距离可视区域多少像素时开始加载
        effect: "fadeIn" // 加载完成后的显示效果，可设置为 fadeIn 或 show
    });
});

这样，当图片进入视口范围（距离可视区域小于设定的 threshold 值）时，图片就会开始加载。

问题解决

图片加载出错或加载不出来

图片加载出错或者根本加载不出来可能是图片路径设置错误或者图片本身出现问题，可以通过以下方法排查问题。

• 检查图片路径是否正确，确认图片是否存在。
• 使用浏览器的开发者工具查看控制台中是否有提示或错误信息。
• 检查图片格式是否正确，确保图片文件没有损坏。

新添加的图片无法延迟加载

因为Lazyload插件默认会在页面首次加载时扫描并处理所有设置了 data-src 的图片，因此如果之后动态添加了图片而没有使用插件的 reload 方法进行处理，则这些图片无法实现延迟加载。

可以在成功添加图片后调用这个方法重新加载插件即可：

$(function() {
    // 动态加载一组图片
    $("body").append('<img class="lazy" data-src="path/to/image.jpg" alt="image" />');
    // 调用插件的 reload 方法，重新加载插件
    $("img.lazy").lazyload("reload");
});

图片在加载前出现闪烁

当图片还未开始加载时，页面上只有占位符，这可能会导致用户体验到图片加载过程中的闪烁。

可以通过设置 CSS 样式来优化这个问题：

img.lazy {
    opacity: 0; /* 透明度设为0，图片加载前不可见 */
    transition: opacity 0.4s ease-in-out; /* 添加过渡效果，使显示更平滑 */
}
img.lazy.loaded {
    opacity: 1; /* 图片加载完成后，透明度设为1，显示出来 */
}

$(function() {
    $("img.lazy").lazyload({
        threshold: 200, // 距离可视区域多少像素时开始加载
        effect: "fadeIn", // 加载完成后的显示效果，可设置为 fadeIn 或 show
        load: function() {
            $(this).addClass("loaded"); // 图片加载完成后为其添加 loaded 类名
        }
    });
});

这样就可以在图片加载前进行优化，减少闪烁的情况。

示例说明

延迟加载多张图片

<div class="image-list">
    <img class="lazy" data-src="path/to/image1.jpg" alt="image 1" />
    <img class="lazy" data-src="path/to/image2.jpg" alt="image 2" />
    <img class="lazy" data-src="path/to/image3.jpg" alt="image 3" />
    <img class="lazy" data-src="path/to/image4.jpg" alt="image 4" />
    <img class="lazy" data-src="path/to/image5.jpg" alt="image 5" />
    <img class="lazy" data-src="path/to/image6.jpg" alt="image 6" />
    <img class="lazy" data-src="path/to/image7.jpg" alt="image 7" />
    <img class="lazy" data-src="path/to/image8.jpg" alt="image 8" />
</div>

$(function() {
    $("img.lazy").lazyload({
        threshold: 200,
        effect: "fadeIn"
    });
});

动态加载图片

<div class="image-list"></div>
<button id="add-btn">添加图片</button>

$(function() {
    // 添加图片
    $("#add-btn").on("click", function() {
        var img = '<img class="lazy" data-src="path/to/image.jpg" alt="image" />';
        $(".image-list").append(img);
        // 重新加载插件
        $("img.lazy").lazyload("reload");
    });

    // 初始化延迟加载插件
    $("img.lazy").lazyload({
        threshold: 200,
        effect: "fadeIn"
    });
});