eager中文

什么是 eager 加载？

在HTML中，eager 是一种资源加载策略，表示浏览器应立即加载指定的资源（如图片、脚本等），而不是等到需要时才加载。 它通常用于 <img> 或 <iframe> 元素的 loading 属性中。

默认情况下，大多数资源采用 eager 行为。例如，当页面加载时，所有未设置 loading="lazy" 的图片都会立即请求。

eager 与 lazy 的区别

• eager（急切加载）：资源在页面解析到该元素时立即加载，无论是否在视口中。
• lazy（懒加载）：资源仅在即将进入用户视口时才开始加载，有助于提升初始页面加载速度。

使用 eager 适合关键内容（如首屏图片、Logo），而 lazy 更适合长页面中的非关键资源。

代码示例

以下是一个使用 eager 加载的图片示例：

<img src="hero-banner.jpg" 

     alt="首页横幅"

     loading="eager"

     width="800"

     height="400">

相比之下，懒加载写法如下：

<img src="gallery-photo.jpg" 

     alt="图库照片"

     loading="lazy"

     width="600"

     height="400">

何时使用 eager？

1. 首屏关键图像（如网站Logo、主视觉图）
2. 对用户体验至关重要的资源
3. 资源体积较小且数量不多的情况
4. 不希望因延迟加载导致布局偏移（CLS）的内容

浏览器兼容性

loading 属性在现代浏览器中广泛支持（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）。 对于不支持的旧浏览器，会自动回退到默认的 eager 行为，因此使用它是安全的。