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

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

实现图片懒加载，说白了，就是别一股脑儿把页面上所有图片都加载了。只加载那些用户当前能看到或者即将看到的图片，剩下的等用户滚动到相应位置再加载。这对于提升网页的初始加载速度、节省用户流量，尤其是移动端用户，简直是立竿见影的优化手段。用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，但如果能让它们更快地获取到核心内容，总是件好事。所以，懒加载不仅仅是技术优化，更是用户体验和业务增长的策略。

viable

基于GPT-4的AI非结构化数据分析平台

100

查看详情

除了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
```
  属性。

处理好这些挑战，才能让图片懒加载真正发挥其优化作用，而不是带来新的问题。这需要开发者在设计和实现时，多一份细心和考量。

以上就是怎么使用JavaScript实现图片css javascript java html js go html5 seo 浏览器 edge 回调函数懒加载 JavaScript html5 firefox css chrome html npm edge 回调函数线程主线程 JS 事件 dom 异步 padding viewport 搜索引擎性能优化 SEO iframe

解决方案

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

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

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

大家都在看：

推荐文章