什么是 eager？
在 HTML 中，eager 是 loading 属性的一个可选值，用于指定资源（如图片）应立即加载，而不是延迟加载（lazy loading）。
默认情况下，浏览器对某些元素（如 <img>）使用 eager 行为，但显式声明有助于提高代码可读性和控制加载策略。
基本语法
在 <img> 标签中使用 loading="eager"：
<img src="hero.jpg" alt="主图" loading="eager" width="800" height="600">
同样适用于 <iframe>：
<iframe src="https://example.com" loading="eager"></iframe>
eager vs lazy
- eager（默认）：资源立即加载，适合首屏关键内容。
- lazy：资源滚动到视口附近时才加载，节省带宽，提升初始加载速度。
示例对比：
首屏主图 → 使用 loading="eager"
页面底部评论区头像 → 使用 loading="lazy"
何时使用 eager？
- 首屏（Above-the-fold）的关键图片或 iframe。
- Logo、导航栏背景等用户第一时间看到的内容。
- 对用户体验有直接影响的核心视觉元素。
合理使用 eager 可避免布局偏移（CLS），提升 Lighthouse 性能评分。
浏览器兼容性
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）均支持 loading 属性。
旧版浏览器会忽略该属性，按默认行为（即 eager）处理，因此具有良好的降级兼容性。
最佳实践建议
- 仅对真正关键的资源使用
eager，避免滥用导致带宽浪费。 - 结合
width和height属性防止布局抖动。 - 配合
alt属性提升可访问性与 SEO。 - 测试不同网络环境下的加载表现。