jquery.lazyload.js

jQuery LazyLoad 插件简介

jQuery Lazyload 是一个轻量级的插件，用于延迟加载长页面中的图片。只有当用户滚动到图片位置时，图片才会加载，从而减少页面初始加载时间，提升性能。

基本使用方法

1. 引入依赖文件
   确保页面中已加载 jQuery 和 jquery.lazyload.js：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="jquery.lazyload.js"></script>

2. 修改图片标签
   将需要延迟加载的图片 src 属性替换为 data-original，并添加 lazy 类：

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

3. 初始化插件
   调用 lazyload() 方法并配置参数：

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

常用配置参数

• threshold：提前加载的像素值（默认 0）。例如设为 200 表示距离图片 200 像素时开始加载。
• effect：加载动画效果，如 "fadeIn"。
• event：触发加载的自定义事件（如 "click"）。
• container：指定滚动容器（默认为 window）。

注意事项

• 图片需设置 width 和 height，避免页面布局因延迟加载而跳动。
• 对动态添加的内容（如 AJAX 加载），需重新调用 $("img.lazy").lazyload()。

替代方案

现代浏览器支持原生延迟加载（loading="lazy"），无需依赖 jQuery：

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

原生方案性能更优，但兼容性需考虑（IE 不支持）。

如需进一步优化，可结合 Intersection Observer API 实现更高效的延迟加载。