JS实现图片懒加载方法详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JS实现图片懒加载方法详解》，聊聊，我们一起来看看吧！

图片懒加载的核心是延迟加载非视口内的图片，提升页面加载速度和用户体验；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 API，它比传统的监听滚动事件要高效和优雅得多。

首先，HTML结构需要做一点小调整。我们不直接把图片地址放在 src 属性里，而是放在一个自定义属性，比如 data-src。

<img data-src="path/to/your/image1.jpg" alt="描述文字" class="lazyload-img">
<img data-src="path/to/your/image2.jpg" 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 属性。这又是另一个小小的挑战了，但思路和图片懒加载是相通的。

到这里，我们也就讲完了《JS实现图片懒加载方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！