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

首先，HTML结构需要做一点小调整。我们不直接把图片地址放在

src

data-src

@@##@@
@@##@@

然后，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()

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

下载

后来接触到

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"

@@##@@

这个属性的兼容性也在不断提升，它比JS方案更原生、性能更好。但它也有它的局限性，比如你可能需要更精细地控制加载时机（

rootMargin

loading="lazy"

IntersectionObserver

最后，别忘了那些背景图片。CSS背景图片不能直接用

data-src

background-image

style