登录
首页 >  文章 >  前端

JavaScript图片懒加载实现技巧详解

时间：2025-09-29 18:36:34 107浏览 收藏

想提升网站速度和用户体验？本文详解**JavaScript图片懒加载**技术，助你优化网页性能！图片懒加载通过延迟加载非首屏图片，有效缩短页面初始加载时间，节省用户流量。首选方案是使用原生`loading="lazy"`属性，若需更好兼容性，则推荐使用**Intersection Observer API**。该API能高效监听图片元素是否进入视口，触发图片加载，避免传统scroll事件监听的性能问题。本文还深入探讨了实现懒加载可能遇到的布局抖动、首屏加载延迟、SEO优化等问题，并提供实用解决方案，助你打造更流畅、更快速的网站。

答案：图片懒加载通过延迟非关键图片的加载，显著提升页面初始加载速度、节省流量并改善用户体验。实现方式首选原生loading="lazy"，兼容性不足时使用Intersection Observer API，其通过监听元素进入视口触发加载，性能优于传统scroll事件监听。需注意布局抖动、首屏加载、SEO及动态内容等挑战，合理设置占位符、预加载关键资源，并处理响应式图片属性以确保最佳效果。

怎么使用JavaScript实现图片懒加载？

实现图片懒加载，说白了，就是别一股脑儿把页面上所有图片都加载了。只加载那些用户当前能看到或者即将看到的图片，剩下的等用户滚动到相应位置再加载。这对于提升网页的初始加载速度、节省用户流量，尤其是移动端用户，简直是立竿见影的优化手段。用JavaScript来搞定这事儿，最优雅、最现代的办法，非Intersection Observer莫属。它能帮你高效地监测元素是否进入了视口，省去了自己监听滚动事件、计算位置的麻烦。

解决方案

图片懒加载的核心思想是：页面加载时，图片不直接使用src属性加载图片源，而是将图片地址存放在一个自定义属性（比如data-src）中。当图片进入用户视口时，再用JavaScript把data-src的值赋给src，从而触发图片加载。

这里我们主要使用Intersection Observer API来实现：

  1. HTML 结构准备： 给需要懒加载的图片添加一个特定的类名（比如lazy-img），并把真实的图片地址放在data-src属性里。src属性可以放一个占位符图片（比如一个小的、透明的GIF，或者一个loading图），或者干脆留空。同时，为了避免图片加载时的布局抖动（CLS问题），最好给图片设置width和height属性，或者通过CSS预留好空间。

    <img class="lazy-img" data-src="https://via.placeholder.com/600x400/FF5733/FFFFFF?text=Image+1" alt="Placeholder Image 1" width="600" height="400">
<img class="lazy-img" data-src="https://via.placeholder.com/600x400/33FF57/FFFFFF?text=Image+2" alt="Placeholder Image 2" width="600" height="400">
<!-- 更多图片，往下滚动才能看到 -->
<img class="lazy-img" data-src="https://via.placeholder.com/600x400/3357FF/FFFFFF?text=Image+3" alt="Placeholder Image 3" width="600" height="400">
<img class="lazy-img" data-src="https://via.placeholder.com/600x400/FFFF33/000000?text=Image+4" alt="Placeholder Image 4" width="600" height="400">

  2. JavaScript 逻辑： 创建一个Intersection Observer实例，遍历所有带有lazy-img类的图片，并将它们添加到观察器中。当图片进入视口时，回调函数会触发，我们将data-src赋值给src，然后停止观察该图片。

    document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy-img');

    // 检查浏览器是否支持 Intersection Observer
    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) { // 当元素进入视口时
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src; // 将data-src赋值给src
                    // 如果有data-srcset，也一并处理
                    if (lazyImage.dataset.srcset) {
                        lazyImage.srcset = lazyImage.dataset.srcset;
                    }
                    lazyImage.classList.remove('lazy-img'); // 移除懒加载类名
                    observer.unobserve(lazyImage); // 停止观察该图片，避免重复加载
                }
            });
        }, {
            // root: null, // 默认是视口
            // rootMargin: '0px 0px 100px 0px', // 提前100px加载，优化用户体验
            threshold: 0.01 // 元素有一点点进入视口就触发
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage); // 观察每个懒加载图片
        });
    } else {
        // 浏览器不支持 Intersection Observer 的降级处理
        // 比如直接加载所有图片，或者使用传统的 scroll/resize 事件监听
        console.warn("Intersection Observer is not supported. All images will be loaded directly.");
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
            if (lazyImage.dataset.srcset) {
                lazyImage.srcset = lazyImage.dataset.srcset;
            }
            lazyImage.classList.remove('lazy-img');
        });
    }
});

这段代码的核心是IntersectionObserver。它会异步地观察目标元素与祖先元素或顶级文档视口（viewport）的交叉状态。当交叉状态发生变化时，会执行回调函数。isIntersecting属性就是判断元素是否进入了视口。rootMargin参数可以让你设置一个“提前量”，比如在图片距离视口还有100px的时候就开始加载，这样用户滚动起来会感觉更流畅，图片不会突兀地出现。

为什么图片懒加载对网站性能和用户体验如此重要？

说起来，图片懒加载这事儿，初衷就是为了让网站“跑得更快，看得更爽”。它带来的好处是多方面的，不仅仅是速度那么简单。

首先，最直观的，就是显著提升页面的初始加载速度。想象一下，一个页面有几十张甚至上百张图片，如果一股脑儿全加载了，那带宽消耗和请求数量是巨大的。浏览器需要处理这些请求，解析图片数据，这会阻塞渲染，导致用户看到一个空白页或者加载缓慢的页面。懒加载只加载首屏图片，大大减少了首次请求的资源量，让用户能更快地看到内容，这直接影响了用户对网站的第一印象。

其次，它节省了用户的流量。尤其是对于移动端用户，流量是有限的。如果用户只是看了一部分内容就离开了，那些没滚到的图片就没必要加载，这无疑是为用户省钱。从网站运营的角度看，这也降低了服务器的带宽成本。

再者，懒加载对改善用户体验至关重要。一个加载快的网站，用户等待时间短，心情自然好。而如果页面卡顿、图片半天出不来，用户很容易就失去耐心，直接关掉页面。此外，懒加载有助于减少页面的“布局抖动”（Layout Shift），也就是图片加载后撑开空间，导致页面内容跳动。通过预留图片空间或者使用占位符，可以有效缓解这个问题，这在Google的Core Web Vitals中，是衡量用户体验的重要指标（Cumulative Layout Shift, CLS）。

最后，别忘了对SEO的潜在积极影响。搜索引擎越来越重视用户体验和页面性能。一个加载速度快、用户体验好的网站，更有可能获得更高的搜索排名。虽然搜索引擎爬虫现在也能执行JavaScript，但如果能让它们更快地获取到核心内容，总是件好事。所以，懒加载不仅仅是技术优化，更是用户体验和业务增长的策略。

除了Intersection Observer，还有哪些实现懒加载的方式？它们各自的优缺点是什么？

其实在Intersection Observer出现之前，大家为了实现懒加载，也是绞尽脑汁。现在回过头看，那些方法各有特点，但大多不如Intersection Observer优雅和高效。

  1. 传统的scroll/resize事件监听

    • 实现方式： 这是最原始的方法。通过监听window的scroll和resize事件，在事件触发时，遍历所有待加载的图片，计算它们相对于视口的位置。如果图片顶部或底部进入了视口范围，就加载它。
    • 优点： 兼容性非常好，几乎所有浏览器都支持。理解起来也相对直观。
    • 缺点： 性能问题是最大的痛点。scroll事件触发非常频繁，每次触发都可能需要进行大量的DOM操作（获取元素位置、计算），这会导致主线程繁忙，页面卡顿，甚至出现“掉帧”现象。为了缓解这个问题，通常需要配合debounce（防抖）或throttle（节流）来限制事件的触发频率，但即便如此，也难以达到Intersection Observer的效率。代码也相对复杂，需要自己处理各种边界情况和计算逻辑。

  2. loading="lazy"原生属性

    • 实现方式： 这是HTML5新增的一个属性，直接在或