HTMLImageElement: fetchPriority 属性

Baseline 2024
新推出

自 2024 年 10 月以来,此功能已可在最新的设备和浏览器版本上使用。此功能可能不适用于旧设备或浏览器。

HTMLImageElement 接口的 fetchPriority 属性表示一个向浏览器发出的提示,指示浏览器应如何相对于其他图片来优先获取该图片。它反映了相应 <img> 元素的 fetchpriority 属性。

该属性允许开发者发出信号,表明在加载过程早期获取某个图片对用户体验的影响比浏览器在分配内部优先级时可以合理推断出的要大或小。这反过来又允许浏览器增加或减少优先级,并可能比平时更早或更晚地加载图片。该属性应谨慎使用,因为过度或不正确的优先级设置会降低性能。

fetchPriority 可用于补充 预加载,允许开发者提高某个图片相对于默认优先级较高的、影响较小的资源的优先级。例如,如果开发者知道某个图片对网站的 最大内容绘制 (LCP) 有显著贡献,他们可以为该图片添加 <link rel="preload">,然后使用 fetchPriority 属性进一步提高其优先级。

请注意,任何获取操作的内部优先级以及 fetchPriority 对优先级的影响完全取决于浏览器。

一个表示优先级提示的字符串。可能的值为:

high

相对于具有相同内部优先级的其他图片,以高优先级获取该图片。

low

相对于具有相同内部优先级的其他图片,以低优先级获取该图片。

auto

不为获取优先级设置用户偏好。这是默认值。如果没有设置值或设置了无效值,则使用此值。

示例

js
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";

规范

规范
HTML
# dom-img-fetchpriority

浏览器兼容性

另见