jquery.lazyload

jQuery LazyLoad 简介

jQuery Lazyload 是一个轻量级的插件，用于延迟加载页面中的图片或其他内容，直到用户滚动到它们附近时才加载。这可以显著减少页面初始加载时间，提升性能。

安装与引入

通过 CDN 引入 jQuery 和 LazyLoad 插件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

或通过 npm 安装：

npm install jquery-lazyload

基本用法

将图片的 src 属性替换为 data-original，并调用 lazyload() 方法：

<img class="lazy" data-original="image.jpg" width="640" height="480">

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

常用配置选项

• threshold：指定提前加载的像素距离（默认为 0）。

  $("img.lazy").lazyload({ threshold: 200 });

• effect：加载时的动画效果（如 "fadeIn"）。

  $("img.lazy").lazyload({ effect: "fadeIn" });

• placeholder：设置占位图片的 URL。

  $("img.lazy").lazyload({ placeholder: "placeholder.gif" });

注意事项

• 确保图片设置 width 和 height，避免页面布局抖动。
• 对动态添加的内容需手动调用 lazyload()。
• 现代浏览器支持原生懒加载（loading="lazy"），可优先考虑原生方案。

替代方案

原生 HTML 懒加载：

<img src="image.jpg" loading="lazy" alt="Example">

其他插件如 lozad.js 或 vanilla-lazyload 更适合无 jQuery 的项目。