"为什么别人的网站秒开，我的网页加载得像PPT？"
如果你也遇到过这个问题，那么今天的主角——图片懒加载（Lazy Loading），就是你的救星。作为一个让无数前端工程师真香的技术，它能让你的网页性能瞬间提升50%以上。
一、什么是懒加载？
想象一下，你去电影院看电影，但服务员把全场所有观众的爆米花一次性全倒你怀里——没错，这就是传统图片加载：打开网页，所有图片一口气全下载。
而懒加载的做法是：只加载你视线范围内的图片，其他的等你要看的时候再加载。就像服务员只在你要吃的时候才给你爆米花。
简单来说：按需加载，避免浪费。
二、为什么非要懒加载不可？
先给几个扎心数据：
- 70% 的用户会因为网页加载慢而离开
- 图片资源平均占网页总大小的60% 以上
- 一个页面可能有上百张图片，但用户首屏只看得到3-5张
不懒加载的后果：
- 流量浪费：用户可能根本没往下滚动就关了页面
- 阻塞渲染：图片抢占带宽，导致关键资源加载变慢
- 用户体验差：页面一直在转菊花，用户心态爆炸
懒加载的好处：
- 首屏加载速度提升 50%-70%
- 节省用户流量（特别是移动端）
- 减少服务器压力
- 用户体验直线上升
三、核心实现原理
懒加载的核心逻辑就三步：
- 占位：先用一个小图片或者占位符占住位置
- 监听：监听页面滚动，判断图片是否进入可视区域
- 加载：进入可视区域后，再把真实图片地址塞到
src属性里
就这么简单？对，就这么简单。
四、手把手实现方式
方案一：最原始的scroll事件监听（兼容性好）
<!-- HTML结构 -->
<img class="lazy" src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载示例">
<script>
// JavaScript实现
function lazyLoad() {
const images = document.querySelectorAll('img.lazy');
images.forEach(img => {
// 获取图片到视口顶部的距离
const rect = img.getBoundingClientRect();
// 判断是否进入可视区域（这里的100是提前量，可以调整）
if (rect.top < window.innerHeight + 100) {
// 加载真实图片
img.src = img.dataset.src;
img.classList.remove('lazy'); // 加载后移除标记
}
});
}
// 监听滚动事件（记得防抖）
let timer;
window.addEventListener('scroll', () => {
clearTimeout(timer);
timer = setTimeout(lazyLoad, 200);
});
// 页面加载时也执行一次
lazyLoad();
</script>优点：兼容IE，简单粗暴
缺点：性能差，滚动频繁触发计算，需要手动防抖
方案二：现代浏览器神器 - Intersection Observer API（强烈推荐）
这是浏览器原生提供的观察元素是否可见的API，性能碾压scroll方案。
<img class="lazy" src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载示例">
<script>
// 配置选项
const options = {
root: null, // 视口作为根
rootMargin: '50px 0px', // 提前50px开始加载
threshold: 0.01 // 可见1%就触发
};
// 创建观察者
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
// 加载真实图片
img.src = img.dataset.src;
img.classList.remove('lazy');
// 加载完后取消观察
observer.unobserve(img);
}
});
}, options);
// 观察所有懒加载图片
document.querySelectorAll('img.lazy').forEach(img => {
observer.observe(img);
});
</script>优点：
- 性能极佳，浏览器原生优化
- 代码简洁，无需手动计算
- 自动处理，无需防抖
缺点：IE不支持（但2024年了，真的还有IE用户吗？）
方案三：LazySizes库 - 开箱即用
如果你不想自己写，直接用成熟的库最省心。
<!-- 引入CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
<!-- 使用方式：加class和data-src -->
<img class="lazyload" data-src="real-image.jpg" alt="懒人福音">优点：功能强大，支持响应式图片，自动处理，社区成熟
缺点：引入额外依赖（gzip后其实只有几KB）
五、高级技巧与优化
1. 渐进式加载体验
先用模糊小图占位，再加载高清图：
<img
class="lazy"
src="tiny-blur.jpg"
data-src="high-res.jpg"
style="filter: blur(5px); transition: filter 0.5s;"
onload="this.style.filter='blur(0)'"
>2. 结合响应式图片
<img
class="lazy"
data-src="mobile.jpg"
data-srcset="mobile.jpg 480w, tablet.jpg 768w, desktop.jpg 1024w"
alt="响应式懒加载"
>3. 错误处理
img.onerror = function() {
this.src = 'fallback.jpg'; // 加载失败用备用图
console.error(`图片加载失败: ${this.dataset.src}`);
};六、注意事项与最佳实践
- 首屏图片别懒加载：首屏关键图片直接加载，别给用户第一眼就空白
loading="lazy"属性 ：现代浏览器原生支持，一行代码搞定<img src="image.jpg" loading="lazy" alt="浏览器级懒加载">但兼容性不如JS方案，建议作为兜底。
- SEO优化：搜索引擎可能不执行JS，重要图片慎用懒加载，或用
<noscript>标签兜底 - 提前量设置：rootMargin别设太小，让用户滚动前就开始加载
- 占位符很重要：防止页面布局跳动（CLS），建议用统一色块或骨架屏
- 性能监控：用PerformanceObserver监控实际加载效果
七、总结
懒加载是前端性能优化的必修课，实现起来不难，但效果显著。
技术选型建议：
- 个人项目/学习：用Intersection Observer API
- 企业项目/兼容性要求高：用LazySizes库
- 快速验证：
loading="lazy"属性
记住：性能优化没有银弹，懒加载不是万能的。合理使用，才能让你的网页既有速度又有体验。
最后的小互动：你在项目中用过懒加载吗？遇到过什么坑？欢迎在评论区分享你的经验！
如果这篇文章帮到了你，点个赞吧～ 🚀
评论0
暂时没有评论