这是一个写在html中，但必须启用JavaScript的属性。
带有 loading="lazy" 属性的图片，其加载时机的核心是当图片即将出现在浏览器的可视视口（viewport）时，浏览器才会开始加载它。
为了让你更清晰地理解这个过程，我将其关键信息整理如下：
| 特性 | 说明 |
|---|---|
| 核心触发时机 | 图片即将进入 可视视口时开始加载。浏览器通常会预留一个距离（如rootMargin），提前开始加载，提升滚动体验。 |
| 首屏图片处理 | 初始化时就在可视区内的懒加载图片，不会延迟 load 事件 的触发。这意味着 load 事件触发时，这些图片可能还在加载中。 |
对 load 事件的影响 |
不会因等待懒加载图片而延迟。这有助于更快地完成页面初始化加载。 |
| 布局位移 | 图片加载完成后可能会导致页面布局发生变化。建议始终为图片设置 width 和 height 属性，以预留空间，防止内容跳动。 |
| 使用前提 | 需要启用 JavaScript。这不仅是功能要求，也是一种反跟踪措施。 |
⏱️ 加载时机的细节
-
核心判断逻辑 ：浏览器内部有一套复杂的机制来监测页面滚动。当它"估算"到一张带有
loading="lazy"属性的图片马上就要被用户滚动到视野中时（即"即将出现在可视视口前不久"），就会立即发起网络请求，下载图片资源。这个过程对开发者来说是自动且透明的。 -
预加载边距 ：浏览器不会等到图片刚好进入视口才加载，通常会设置一个提前加载的距离（根边距，
rootMargin）。这样，当用户快速滚动时，图片已经在后台加载好了，显示出来时就不会有白屏或闪烁，从而提升了浏览体验。 -
首屏图片的特殊性 ：对于那些在页面一加载时就位于可视区域内的懒加载图片，浏览器会在布局信息确定后立即加载它们。但为了不影响页面的核心加载进度，这些图片的加载不会阻塞页面的
load事件 。也就是说，页面的load事件会在所有非懒加载资源（如CSS、JS、正常图片）都准备好后立即触发，而此时，可视区内的懒加载图片可能才刚刚开始下载。
📌 重要注意事项
-
必须指定图片尺寸以预防布局偏移（Cumulative Layout Shift, CLS） ：这是使用懒加载时最容易忽视但又至关重要 的一点。如果图片没有设置
width和height属性，在其加载完成之前，浏览器无法为其分配空间，它的占位区域可能是0*0。一旦图片加载完成，页面就必须重新布局来为它腾出空间，导致它下方的所有内容突然向下或向右跳动，这对用户体验的干扰很大。通过在<img>标签中明确指定宽高，可以建立图片的宽高比，让浏览器在图片加载前就预留出正确的位置，有效防止页面跳动。 -
src属性的位置 ：在 Firefox 浏览器中，需要注意loading属性必须定义在src属性之前，否则懒加载可能不会生效。 -
依赖 JavaScript：原生懒加载依赖 JavaScript 才能实现。这主要是为了防止通过图片请求来追踪用户滚动位置的行为，是一种隐私保护措施。
💡 一句话总结
简单来说，你可以把 loading="lazy" 理解为给浏览器的一个"暗示"："这张图不急，等用户快看到它时再加载，而且加载时别影响页面整体加载完成的时机。"