图片懒加载实战：3行代码就能让网页快60%
一、先看个对比实验
我们拿50张图片做了个测试，一边是普通加载，一边是懒加载，结果差距很明显：
| 对比项 | 普通加载 | 懒加载 |
|---|---|---|
| 首屏加载时间 | 慢（一次性全加载） | 快（只加载能看到的） |
| 带宽消耗 | 100% | 省了60%以上 |
| 服务器压力 | 大 | 小 |
| 用户体验 | 卡顿 | 流畅 |
原理很简单：图片进入用户视线范围才加载，没看到的先用占位图占着位置。就这一个改动，效果立竿见影。
二、3行代码实现懒加载
现代浏览器自带了一个叫IntersectionObserver的api，用它做懒加载不需要任何第三方库。
// 1. 创建观察器
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// 2. 图片进入视线范围
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 3. 把占位图换成真实图片
observer.unobserve(img); // 4. 加载完就不再看它了
}
});
});
// 5. 开始观察所有需要懒加载的图片
document.querySelectorAll('.lazy-img').forEach(img => {
observer.observe(img);
});就这么几行代码，兼容性也很好，IE11以上和所有现代浏览器都支持。
三、实战代码拆解
html结构
<div class="image-item">
<!-- 先用base64占位图 -->
<img
src="data:image/svg+xml;base64,PHN2Zy..."
data-src="真实图片地址.jpg"
class="lazy-img"
/>
</div>关键点：src放占位图。
vue3完整实现
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const lazyContainer = ref(null);
let observer = null;
const initLazyLoad = () => {
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.getAttribute('data-src');
if (src && img.src !== src) {
img.src = src;
img.classList.add('loaded-complete');
observer.unobserve(img); // 加载完就停止观察
}
}
});
},
{ threshold: 0.01 } // 图片露出1%就触发加载
);
// 找出所有懒加载图片，开始观察
const imgs = lazyContainer.value.querySelectorAll('.lazy-img');
imgs.forEach((img) => observer.observe(img));
};
onMounted(initLazyLoad);
onBeforeUnmount(() => observer?.disconnect()); // 组件销毁时清理
</script>四、ElementPlus的懒加载vs自己写
很多人在用ElementPlus的v-lazy指令，那为什么还要自己写？
| 特性 | ElementPlus v-lazy | 自己实现 |
|---|---|---|
| 上手难度 | 简单，一行指令 | 中等 |
| 灵活性 | 有限 | 完全可控 |
| 自定义动画 | 受限 | 随便调 |
| 加载策略 | 固定 | 可调threshold |
| 适用场景 | 快速开发 | 复杂交互需求 |
怎么选：
快速开发、项目不复杂 → 直接用ElementPlus的v-lazy
需要定制加载动画、要统计加载进度、想自定义触发时机 → 自己实现
ElementPlus用法示例：
<el-image v-lazy="url" :preview-src-list="srcList" />五、性能优化小技巧
1. 占位图用SVG base64
用空白占位符代替blank，避免布局抖动：
const PLACEHOLDER = 'data:image/svg+xml;base64,PHN2Zy...';2. 加个平滑过渡动画
让图片加载出来时有个渐显效果，体验更好：
.lazy-img {
filter: blur(8px) grayscale(1);
opacity: 0.5;
transition: all 0.5s;
}
.lazy-img.loaded-complete {
filter: none;
opacity: 1;
}3. 提前一点开始加载
设置rootMargin，让图片离窗口还有100px就开始加载，用户滚动时感觉更流畅：
new IntersectionObserver(callback, {
rootMargin: '100px 0px' // 提前100px触发
});六、懒加载还能用在哪
懒加载不只图片能用，这些场景也很适合：
视频列表：滚动到才加载视频
无限滚动：滚动到底部才加载下一页数据
地图标记点：只加载当前视野内的点
聊天记录：滚动到顶部才加载更早的消息
实际项目中用上懒加载，首屏加载时间能明显降下来，移动端用户省流量，服务器带宽成本也跟着降。
七、一个冷知识
浏览器其实有个原生属性loading="lazy"，用起来更简单：
<img src="image.jpg" loading="lazy" />但它和IntersectionObserver有什么区别？
loading="lazy"：浏览器自动处理，但触发时机不能自定义，兼容性一般
IntersectionObserver：完全可控，能做更多定制（比如加动画、统计加载进度）
简单场景用原生属性就够了，复杂需求还得自己写。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！