什么是 eager？
在 HTML 中，eager 是 <img> 和 <iframe> 元素的 loading 属性的一个可选值。
它表示该资源应立即加载，而不是等到用户滚动到附近才加载（即懒加载）。
默认情况下，浏览器对图片和 iframe 使用 eager 行为，但显式声明有助于提高代码可读性和明确意图。
基本语法
<img src="hero.jpg" loading="eager" alt="首页主图">
<iframe src="https://example.com" loading="eager"></iframe>
eager 与 lazy 的区别
- eager（默认）：资源在页面初始加载时立即下载，适用于首屏关键内容。
- lazy：资源延迟加载，仅当用户滚动接近该元素时才开始加载，适用于非首屏内容以节省带宽。
示例对比：
✅ 首屏 Banner 图 → 使用 loading="eager"
✅ 页面底部评论区头像 → 使用 loading="lazy"
何时使用 eager？
- 页面顶部的 Logo 或导航栏图片
- 首屏 Hero Image（主视觉图）
- 关键功能所需的 iframe（如支付组件）
- SEO 重视的图片（搜索引擎优先索引首屏内容）
注意：过度使用 eager 会增加初始加载时间，影响用户体验和 Core Web Vitals 指标。
浏览器兼容性
loading 属性自 Chrome 76、Edge 79、Firefox 75 起支持。
对于不支持的浏览器，会自动忽略该属性，按默认行为（即 eager）处理，因此是安全的渐进增强方案。
最佳实践建议
- 仅对首屏关键资源使用
eager - 结合
alt属性提升可访问性与 SEO - 配合响应式图片（
srcset）进一步优化加载 - 使用 Lighthouse 或 PageSpeed Insights 检测加载性能