基于 jQuery.lazyload 插件实现图片延迟加载
在高性能 Web 开发中，图片延迟加载（Lazy Loading）是优化页面加载速度、节省带宽资源的常用手段。jQuery.lazyload 是一款轻量级插件，能够延迟加载处于视口之外的图片，直到用户滚动到该图片所在位置。以下是该插件的详细配置与使用方法。
1. 引入必要依赖
首先，需要在 HTML 页面中引入 jQuery 库以及 jQuery.lazyload 插件脚本：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>2. 编写 HTML 结构
为了配合插件工作，图片标签不应直接将路径写入 src 属性，而是放入 data-original 属性中。建议通过类名（如 lazy-img）进行标识：
<!-- 基础用法 -->
<img class="lazy-img" data-original="assets/images/sample-01.jpg" width="600" height="400">
<img class="lazy-img" data-original="assets/images/sample-02.jpg" width="600" height="400">
<img class="lazy-img" data-original="assets/images/sample-03.jpg" width="600" height="400">3. 初始化插件
在 DOM 加载完成后，通过 jQuery 选择器调用 lazyload() 方法即可激活功能。最基础的配置如下：
$(function() {
$("img.lazy-img").lazyload({
effect: "fadeIn" // 图片加载时使用淡入效果
});
});如果不希望通过类名筛选，也可以直接对全局 <img> 标签生效，但为了性能建议指定作用范围。
4. 进阶参数配置
jQuery.lazyload 提供了丰富的配置选项，用于满足不同的业务场景：
$("img.lazy-img").lazyload({
// 设置占位图，在真实图片加载前显示
placeholder: "assets/images/loading.gif",
// 灵敏度设置：提前 200 像素触发加载，避免用户看到空白
threshold: 200,
// 触发事件：可以设置为 click 或 mouseover，默认是 scroll
event: "scroll",
// 载入动画效果，常用值包括 fadeIn, slideDown 或 show
effect: "fadeIn",
// 指定容器：如果图片在某个溢出隐藏的可滚动 DIV 中，需指定该容器
container: $("#scroll-container"),
// 容错处理：当页面布局复杂导致图片排序混乱时，增加此参数确保能搜索到更多图片
failure_limit: 10
});5. 核心参数详解
- threshold：阈值。设置为 200 表示图片距离屏幕可视区域底部还有 200 像素时，就开始后台加载。
- placeholder：在延迟加载期间展示的图片路径，通常使用一个小体积的 GIF 或灰色色块。
- container：默认情况下插件监听浏览器窗口的滚动。如果你的图片嵌套在一个具有
overflow: auto属性的容器内，必须将该容器传入此参数。 - failure_limit：该插件默认在找到第一张不在可见区域的图片后停止循环。在某些使用了浮动或绝对定位的复杂布局中，图片顺序与 DOM 顺序不一致，调大此数值可以避免图片无法加载的问题。
