前端性能优化: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 提供了丰富的参数选项。
1. 提前加载阈值
默认情况下,图片必须出现在屏幕内才会触发加载。如果担心网络慢导致闪烁,可以设置 threshold 参数,让图片在距离视口一定像素时就提前加载。
$("img").lazyload({ threshold: 200 });
这里设置为 200 像素,意味着图片还没完全进屏幕前 200px 就开始下载了。
2. 加载动画效果
图片加载完成后,默认是直接显示(show)。为了提升视觉体验,可以使用 CSS 过渡效果,比如淡入(fadeIn)。
$("img").lazyload({ effect: "fadeIn" });

