怎么使用JavaScript实现图片懒加载？-js教程-PHP中文网

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

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

实现图片懒加载，说白了，就是别一股脑儿把页面上所有图片都加载了。只加载那些用户当前能看到或者即将看到的图片，剩下的等用户滚动到相应位置再加载。这对于提升网页的初始加载速度、节省用户流量，尤其是移动端用户，简直是立竿见影的优化手段。用JavaScript来搞定这事儿，最优雅、最现代的办法，非

Intersection Observer

登录后复制

莫属。它能帮你高效地监测元素是否进入了视口，省去了自己监听滚动事件、计算位置的麻烦。

解决方案

图片懒加载的核心思想是：页面加载时，图片不直接使用

src

登录后复制

属性加载图片源，而是将图片地址存放在一个自定义属性（比如

data-src

登录后复制

）中。当图片进入用户视口时，再用JavaScript把

data-src

登录后复制

的值赋给

src

登录后复制

，从而触发图片加载。

这里我们主要使用

Intersection Observer

登录后复制

API来实现：

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

<img class="lazy-img"  alt="Placeholder Image 3" width="600" height="400">
<img class="lazy-img"  alt="Placeholder Image 4" width="600" height="400">
```
登录后复制

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的时候就开始加载，这样用户滚动起来会感觉更流畅，图片不会突兀地出现。

立即学习“Java免费学习笔记（深入）”；

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

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

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

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

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

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

图酷AI

下载即用！可以免费使用的AI图像处理工具，致力于为用户提供最先进的AI图像处理技术，让图像编辑变得简单高效。

查看详情

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

其实在

Intersection Observer

登录后复制

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

Intersection Observer

登录后复制

优雅和高效。

传统的
```
scroll
```
登录后复制
/
resize
登录后复制
事件监听
- 实现方式： 这是最原始的方法。通过监听
```
window
```
  登录后复制
  的
```
scroll
```
  登录后复制
  和
```
resize
```
  登录后复制
  事件，在事件触发时，遍历所有待加载的图片，计算它们相对于视口的位置。如果图片顶部或底部进入了视口范围，就加载它。
- 优点： 兼容性非常好，几乎所有浏览器都支持。理解起来也相对直观。
- 缺点： 性能问题是最大的痛点。
```
scroll
```
  登录后复制
  事件触发非常频繁，每次触发都可能需要进行大量的DOM操作（获取元素位置、计算），这会导致主线程繁忙，页面卡顿，甚至出现“掉帧”现象。为了缓解这个问题，通常需要配合
```
debounce
```
  登录后复制
  （防抖）或
```
throttle
```
  登录后复制
  （节流）来限制事件的触发频率，但即便如此，也难以达到
```
Intersection Observer
```
  登录后复制
  的效率。代码也相对复杂，需要自己处理各种边界情况和计算逻辑。
```
loading="lazy"
```
登录后复制
原生属性
- 实现方式： 这是HTML5新增的一个属性，直接在
```
<img>
```
  登录后复制
  或
```
<iframe>
```
  登录后复制
  标签上添加
```
loading="lazy"
```
  登录后复制
  即可。浏览器会原生处理懒加载逻辑。
- ```
<img src="real-image.jpg" loading="lazy" alt="Lazy Loaded Image">
```
  登录后复制
- 优点： 极其简单，一行代码搞定，无需任何JavaScript。性能最优，因为是浏览器底层实现，可以更好地优化资源调度。对开发者来说，维护成本几乎为零。
- 缺点： 兼容性是其主要限制。虽然现代浏览器（Chrome, Firefox, Edge等）支持度越来越好，但仍然有部分浏览器或旧版本浏览器不支持。这意味着如果你的目标用户群体包含这些浏览器，你可能需要一个JavaScript的降级方案。另外，浏览器对于“何时加载”的判断是内置的，开发者无法像
```
Intersection Observer
```
  登录后复制
  那样精细控制加载的时机（比如提前多少像素加载）。
```
Intersection Observer
```
登录后复制
API (再次强调其优势)
- 实现方式： 如解决方案部分所述，通过创建
```
Intersection Observer
```
  登录后复制
  实例来观察目标元素与视口的交叉状态。
- 优点：
  - 性能卓越： 异步执行，不阻塞主线程，避免了
```
scroll
```
    登录后复制
    事件带来的性能问题。
  - 效率高： 浏览器内部优化，能更高效地检测元素可见性。
  - API简洁： 相比自己写
```
scroll
```
    登录后复制
    监听和位置计算，代码量更少，逻辑更清晰。
  - 可配置性强： 可以通过
```
root
```
    登录后复制
    、
```
rootMargin
```
    登录后复制
    、
```
threshold
```
    登录后复制
    等参数精细控制观察范围和触发时机。
  - 语义化： 专门为解决这类问题而设计。
- 缺点： 兼容性不如
```
scroll
```
  登录后复制
  事件，IE浏览器不支持。对于需要支持IE等老旧浏览器的项目，可能需要引入
```
Intersection Observer
```
  登录后复制
  的Polyfill。

综合来看，

loading="lazy"

登录后复制

是首选，如果兼容性允许，直接用它最省事。如果需要更精细的控制或者要兼容不支持

loading="lazy"

登录后复制

的现代浏览器，那么

Intersection Observer

登录后复制

是最佳选择。至于传统的

scroll

登录后复制

事件监听，现在基本上只作为

Intersection Observer

登录后复制

的降级方案，或者在极少数特定场景下才会考虑。

在实际项目中实现图片懒加载时，可能会遇到哪些常见问题和挑战？

实际落地图片懒加载，听起来简单，但真上手了，总会遇到一些意料之外的“坑”。这就像盖房子，图纸画得再好，施工时总有各种小状况。

布局抖动（Layout Shift）问题 这是最常见也最影响用户体验的问题之一。如果懒加载的图片没有预设宽度和高度，当它们加载出来时，会突然占据空间，导致页面下方的内容向下“跳动”。这不仅让用户感到不适，还会影响Core Web Vitals中的CLS（Cumulative Layout Shift）指标。
- 应对策略： 始终为图片设置
```
width
```
  登录后复制
  和
```
height
```
  登录后复制
  属性，或者通过CSS为图片容器预留足够的空间（例如使用
```
aspect-ratio
```
  登录后复制
  属性或
```
padding-bottom
```
  登录后复制
  技巧）。这样，即使图片还没加载，页面布局也已经稳定了。
首屏图片加载延迟 有时候，页面顶部的一些图片，虽然在视口内，但如果也设置了懒加载，可能会导致它们在页面渲染初期没有及时显示，用户看到的是占位符，体验反而下降。
- 应对策略： 对首屏关键图片不使用懒加载。直接使用
```
src
```
  登录后复制
  属性加载它们，或者给这些图片设置
```
loading="eager"
```
  登录后复制
  （如果使用了原生懒加载）。你甚至可以结合
```
fetchpriority="high"
```
  登录后复制
  或
```
<link rel="preload">
```
  登录后复制
  来进一步优化这些关键图片的加载优先级。
搜索引擎优化（SEO）的顾虑 过去，搜索引擎爬虫对JavaScript的执行能力有限，可能会忽略
```
data-src
```
登录后复制
中的图片。虽然现在主流搜索引擎的爬虫已经很强大，能执行JavaScript，但为了确保万无一失，还是有些地方要注意。
- 应对策略： 确保
```
data-src
```
  登录后复制
  中的URL是可访问的。对于非常重要的图片，可以考虑不懒加载。另外，提供
```
alt
```
  登录后复制
  属性是必须的，它能帮助搜索引擎理解图片内容。如果担心，也可以在
```
noscript
```
  登录后复制
  标签中提供一个非JS版本的图片链接，作为备用方案。
动态内容或单页应用（SPA）中的处理 在SPA或有大量动态加载内容的网站中，新的图片元素可能会在页面初始化之后才被添加到DOM中。如果只在
```
DOMContentLoaded
```
登录后复制
时初始化
```
Intersection Observer
```
登录后复制
，这些新图片就不会被观察到。
- 应对策略： 在动态添加图片到DOM之后，需要重新调用
```
Intersection Observer
```
  登录后复制
  的
```
observe()
```
  登录后复制
  方法来观察这些新元素。或者，你可以创建一个通用的函数来初始化观察器，并在每次DOM更新后调用它。
浏览器兼容性
```
Intersection Observer
```
登录后复制
在现代浏览器中支持良好，但对于IE等老旧浏览器则不兼容。
- 应对策略： 引入
```
Intersection Observer
```
  登录后复制
  的Polyfill。例如，可以从CDN加载或者通过npm安装
```
intersection-observer
```
  登录后复制
  库。在不支持的浏览器中，也可以选择直接加载所有图片作为降级方案，或者回退到传统的
```
scroll
```
  登录后复制
  事件监听（但要做好性能优化）。
用户体验细节：占位符和加载指示 在图片加载完成前，用户看到的是什么？一个空白区域，还是一个有意义的占位符？这会影响用户感知。
- 应对策略： 使用低质量图片占位符（LQIP）、模糊效果占位符（如
```
Blurhash
```
  登录后复制
  ）或纯色占位符，这样在图片加载前，用户也能看到一些视觉元素。同时，可以添加一个加载中的指示器（loading spinner），明确告诉用户图片正在加载。
图片
```
srcset
```
登录后复制
和
sizes
登录后复制
属性的处理如果你的图片使用了响应式图片技术（
```
srcset
```
登录后复制
和
```
sizes
```
登录后复制
），懒加载时也需要一并处理。
- 应对策略： 将
```
srcset
```
  登录后复制
  和
```
sizes
```
  登录后复制
  的值也存放在
```
data-srcset
```
  登录后复制
  和
```
data-sizes
```
  登录后复制
  等自定义属性中，在图片进入视口时，一并赋值给
```
srcset
```
  登录后复制
  和
```
sizes
```
  登录后复制
  属性。