什么是 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。 - 测试不同网络环境下的加载表现。