图片懒加载的核心是延迟加载非视口内的图片，提升页面加载速度和用户体验；2. 推荐使用 intersectionobserver api 实现，通过将图片真实地址存于 data-src 属性，在元素即将进入视口时再赋值给 src 加载；3. 设置 rootmargin 可提前加载图片，避免内容突然“蹦出”；4. 对于不支持 intersectionobserver 的旧浏览器，可回退至监听 scroll 事件并结合 getboundingclientrect 和节流处理；5. 懒加载能显著减少首屏资源加载量，优化 fcp 和 lcp 指标，降低服务器带宽压力，提升 seo；6. 为避免布局偏移，应使用低分辨率图、模糊图或纯色背景作为占位符；7. 需监听 onerror 事件处理图片加载失败，替换为默认图或隐藏元素；8. 优先使用原生 loading="lazy" 属性简化实现，但在需精细控制或处理背景图时仍需 javascript 方案；9. 背景图片懒加载需通过 javascript 动态修改 background-image 样式，逻辑与 img 懒加载类似。该方案兼顾性能、兼容性与用户体验，是现代前端优化的重要实践。
图片懒加载在JavaScript里，核心就是延迟加载那些当前不在用户视口范围内的图片。说白了，就是等用户快看到图片的时候，我们才去真正请求它、显示它。这能大幅提升页面加载速度和用户体验，尤其是在图片多的页面。
解决方案
实现图片懒加载，我个人最推荐的方案是使用
IntersectionObserverAPI，它比传统的监听滚动事件要高效和优雅得多。
首先，HTML结构需要做一点小调整。我们不直接把图片地址放在
src属性里，而是放在一个自定义属性，比如
data-src。
<img alt="描述文字" class="lazyload-img"> <img alt="描述文字" class="lazyload-img"> <!-- 更多图片... -->
然后，JavaScript部分：
document.addEventListener('DOMContentLoaded', () => {
const lazyImages = document.querySelectorAll('.lazyload-img');
// 检查浏览器是否支持 IntersectionObserver
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 将data-src赋值给src
img.removeAttribute('data-src'); // 移除data-src属性，避免重复加载
observer.unobserve(img); // 停止观察已加载的图片
}
});
}, {
rootMargin: '0px 0px 100px 0px', // 在图片进入视口前100px时开始加载
threshold: 0 // 只要有一点点进入视口就触发
});
lazyImages.forEach(img => {
observer.observe(img); // 观察所有需要懒加载的图片
});
} else {
// Fallback for older browsers (e.g., using scroll event)
// 这部分会相对复杂一些，需要监听scroll事件并计算getBoundingClientRect()
// 但我个人觉得，现在IntersectionObserver的兼容性已经很好了，
// 除非有非常严格的旧浏览器兼容需求，否则可以考虑简化或直接放弃这部分。
// 这里提供一个简化的回退逻辑，仅作示意：
let active = false;
const lazyLoad = () => {
if (active === false) {
active = true;
setTimeout(() => {
lazyImages.forEach(img => {
if ((img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) && getComputedStyle(img).display !== 'none') {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
active = false;
}, 200); // 稍微延迟一下，减少计算频率
}
};
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad); // 手机横竖屏切换
lazyLoad(); // 页面加载时立即检查一次
}
});这里有个小细节，
rootMargin可以让你在图片进入视口前提前加载，用户体验会更顺滑，不会有图片突然“蹦”出来的感觉。
为什么图片懒加载对网站性能至关重要？
在我看来，图片懒加载不仅仅是一个技术优化，它更像是对用户耐心的一种尊重，以及对服务器资源的一种爱惜。你想啊，一个页面里有几十张甚至上百张图片，如果一股脑儿全加载了，那用户的浏览器得承受多大的压力？页面会卡顿，加载时间会变得异常漫长，甚至直接导致用户关闭页面。
从用户体验角度讲，快速的首次内容绘制（FCP）和大型内容绘制（LCP）是Google Core Web Vitals里非常看重的指标。懒加载能显著减少首次加载时需要处理的资源量，让用户更快看到页面的主要内容，这直接关系到用户对网站的第一印象。我个人就遇到过那种图片加载慢到怀疑人生的网站，体验真的差。
从服务器资源角度看，减少不必要的图片请求，也能有效降低服务器的带宽压力。特别是对于高流量的网站，这笔节省下来的资源开销是相当可观的。而且，现在搜索引擎对网站性能的权重越来越高，一个加载快的网站，在SEO上也会更有优势。
IntersectionObserver与传统滚动事件：我的一些思考和取舍
我刚开始接触懒加载的时候，确实也用过监听滚动事件加
getBoundingClientRect()的方式。那种感觉，怎么说呢，就是“能用”，但总觉得有点笨重。特别是当页面元素很多，或者滚动事件触发频繁时，它会不断地进行DOM计算和重绘，导致页面卡顿，用户体验很不流畅。为了优化，我们还得引入节流（throttle）或防抖（debounce），代码一下子就复杂起来了。说实话，调试起来也挺让人头大的。
后来接触到
IntersectionObserver，我简直觉得发现了新大陆。它真的是一个革命性的API，解决了传统方式的诸多痛点。它不是通过轮询（polling）来判断元素是否可见，而是当目标元素与根元素（通常是视口）发生交叉时，异步地通知你。这意味着浏览器可以在最佳时机执行回调，性能开销极小，几乎不会引起页面的卡顿。代码也变得简洁明了，可读性大大提升。
当然，
IntersectionObserver也有它的兼容性问题，虽然现在主流浏览器支持度已经非常好了。但如果你真的需要支持那些“老掉牙”的浏览器，那传统的滚动事件加上节流/防抖，仍然是一个备选方案。只不过，在我看来，为了极少数的用户去维护一套复杂且性能不佳的代码，可能不是最划算的选择。很多时候，我们得学会在完美和实用之间找到一个平衡点。
除了基础实现，图片懒加载还有哪些值得考虑的细节？
聊到这里，可能有人会问，懒加载是不是就这么简单？其实不然，它还有一些进阶的玩法和值得注意的细节，能让你的懒加载方案更健壮、用户体验更好。
一个很常见的场景是占位符（Placeholder）。在图片加载出来之前，页面上总不能空着一块吧？这会影响布局稳定性，让用户觉得页面在“跳动”。我们可以用一个低分辨率的图片、一个模糊的图片（比如用CSS滤镜实现），或者一个纯色的背景来作为占位符。这样，图片加载完成后，会有一个平滑的过渡，用户体验会好很多。我个人比较喜欢用一个非常小的、经过压缩的低质量图片作为
src，然后等
data-src的高清图加载进来后替换掉。
再来就是错误处理。如果图片加载失败了怎么办？总不能让用户看到一个破碎的图片图标吧。我们可以在图片加载失败时（
onerror事件），给它设置一个默认的“加载失败”图片，或者隐藏它。
img.onerror = () => {
img.src = 'path/to/default-error-image.jpg';
// 或者 img.style.display = 'none';
};还有一个不得不提的，是现代浏览器自带的 loading="lazy"
属性。其实浏览器现在也挺智能的，很多时候我们甚至不用写JavaScript代码，直接在
img标签上加上
loading="lazy"属性，浏览器就会自动处理图片的懒加载。
<img src="path/to/your/image.jpg" alt="描述文字" loading="lazy">
这个属性的兼容性也在不断提升，它比JS方案更原生、性能更好。但它也有它的局限性，比如你可能需要更精细地控制加载时机（
rootMargin），或者需要对背景图片进行懒加载时，JS方案依然是不可或缺的。所以，我的建议是：优先考虑
loading="lazy"，如果不能满足需求，再考虑
IntersectionObserver。两者结合使用，效果会更好。
最后，别忘了那些背景图片。CSS背景图片不能直接用
data-src这种方式。对于背景图片的懒加载，通常需要通过JavaScript动态修改元素的
background-image样式。这需要判断元素是否进入视口，然后动态添加一个CSS类或者直接修改
style属性。这又是另一个小小的挑战了，但思路和图片懒加载是相通的。
