图片懒加载的核心是延迟加载非视口内的图片，提升页面加载速度和用户体验；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里，核心就是延迟加载那些当前不在用户视口范围内的图片。说白了，就是等用户快看到图片的时候，我们才去真正请求它、显示它。这能大幅提升页面加载速度和用户体验，尤其是在图片多的页面。
实现图片懒加载，我个人最推荐的方案是使用
IntersectionObserver
首先，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上也会更有优势。
我刚开始接触懒加载的时候，确实也用过监听滚动事件加
getBoundingClientRect()
后来接触到
IntersectionObserver
当然，
IntersectionObserver
聊到这里，可能有人会问，懒加载是不是就这么简单？其实不然，它还有一些进阶的玩法和值得注意的细节，能让你的懒加载方案更健壮、用户体验更好。
一个很常见的场景是占位符（Placeholder）。在图片加载出来之前，页面上总不能空着一块吧？这会影响布局稳定性，让用户觉得页面在“跳动”。我们可以用一个低分辨率的图片、一个模糊的图片（比如用CSS滤镜实现），或者一个纯色的背景来作为占位符。这样，图片加载完成后，会有一个平滑的过渡，用户体验会好很多。我个人比较喜欢用一个非常小的、经过压缩的低质量图片作为
src
data-src
再来就是错误处理。如果图片加载失败了怎么办？总不能让用户看到一个破碎的图片图标吧。我们可以在图片加载失败时（
onerror
img.onerror = () => {
img.src = 'path/to/default-error-image.jpg';
// 或者 img.style.display = 'none';
};还有一个不得不提的，是现代浏览器自带的 loading="lazy"
img
loading="lazy"
<img src="path/to/your/image.jpg" alt="描述文字" loading="lazy">
这个属性的兼容性也在不断提升，它比JS方案更原生、性能更好。但它也有它的局限性，比如你可能需要更精细地控制加载时机（
rootMargin
loading="lazy"
IntersectionObserver
最后，别忘了那些背景图片。CSS背景图片不能直接用
data-src
background-image
style
以上就是js怎么实现图片懒加载的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
926
收藏
