什么是 eager？
在 HTML 中，eager 是 loading 属性的一个可选值，用于控制资源（如图片或 iframe）的加载行为。
它表示“立即加载”，即资源会在页面解析时立刻被请求，而不是等到用户滚动到附近才加载（后者称为 lazy 懒加载）。
默认情况下，大多数浏览器对图片和 iframe 使用
eager 行为，除非显式设置 loading="lazy"。
基本语法
在 <img> 或 <iframe> 标签中使用：
<img src="image.jpg" loading="eager" alt="示例图片"><iframe src="https://example.com" loading="eager"></iframe>eager 与 lazy 对比
| 属性值 | 加载时机 | 适用场景 |
|---|---|---|
eager |
页面解析时立即加载 | 首屏关键内容（如 Logo、主图） |
lazy |
滚动接近元素时才加载 | 非首屏图片、长列表中的图片 |
实际代码示例
以下图片将使用 eager 立即加载（即使它位于页面底部）：
<img src="hero-banner.jpg"
loading="eager"
alt="首屏横幅图"
width="800" height="400">浏览器兼容性
loading 属性（包括 eager 和 lazy）在现代浏览器中广泛支持：
- Chrome 76+
- Edge 79+
- Firefox 75+
- Safari 15.4+
对于不支持的旧浏览器，会自动忽略该属性，按默认行为（即 eager）处理，因此是安全的。
最佳实践建议
- 对首屏关键图片显式使用
loading="eager"可增强语义清晰度； - 非必要时不需显式写
eager，因为它是默认行为； - 结合
width和height属性防止布局偏移（CLS）； - 优先对重要视觉元素使用
eager，提升用户体验。