深入理解HTML中的eager加载策略
在HTML中,eager 是一种资源加载策略,表示浏览器应立即加载指定的资源(如图片、脚本等),而不是等到需要时才加载。
它通常用于 <img> 或 <iframe> 元素的 loading 属性中。
默认情况下,大多数资源采用 eager 行为。例如,当页面加载时,所有未设置 loading="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">
loading 属性在现代浏览器中广泛支持(Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+)。
对于不支持的旧浏览器,会自动回退到默认的 eager 行为,因此使用它是安全的。