前端性能优化：jQuery 图片懒加载实战

Lazy Load 是一款经典的 jQuery 插件，专为长页面图片延迟加载设计。它的核心逻辑是：只有当用户滚动到可视区域附近时，才去请求图片资源。这与预加载策略相反，但在包含大量大图或长列表的场景下，能显著加快首屏渲染速度，甚至让浏览器更快进入就绪状态，同时减轻服务器压力。

该插件强依赖于 jQuery，因此需要确保项目中已引入 jQuery 库，随后再加载 jquery.lazyload.js。官方文档地址可参考 jQuery LazyLoad。

使用懒加载的核心在于修改 HTML 结构。不要直接设置 src，而是将真实图片路径放入 data-original 属性中，src 可以留空或放一个占位图。

<img alt="示例" width="640" height="480" data-original="img/example.jpg" />

初始化代码非常简单，只需在 DOM 加载完成后调用插件即可：

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

这段代码会遍历所有带有 data-original 属性的图片并启用懒加载。

注意：务必为 img 标签指定 width 和 height 属性。如果缺失，插件无法准确计算元素位置，可能导致布局抖动或加载失效。

实际开发中，我们往往需要根据网络状况或交互体验调整加载行为。Lazy Load 提供了丰富的参数选项。

默认情况下，图片必须出现在屏幕内才会触发加载。如果担心网络慢导致闪烁，可以设置 threshold 参数，让图片在距离视口一定像素时就提前加载。

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

这里设置为 200 像素，意味着图片还没完全进屏幕前 200px 就开始下载了。

图片加载完成后，默认是直接显示（show）。为了提升视觉体验，可以使用 CSS 过渡效果，比如淡入（fadeIn）。

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

更多推荐文章