HTMLImageElement: свойство fetchPriority

Свойство fetchPriority интерфейса HTMLImageElement представляет собой подсказку для браузера, указывающую, как ему следует приоритизировать загрузку определенного изображения по отношению к другим изображениям. Оно отражает атрибут fetchpriority соответствующего элемента <img>.

Это свойство позволяет разработчику указать, что загрузка определенного изображения на ранней стадии процесса загрузки оказывает большее или меньшее влияние на пользовательский опыт, чем это может разумно предположить браузер при назначении внутренней приоритетности. Это, в свою очередь, позволяет браузеру повысить или понизить приоритет и потенциально загрузить изображение раньше или позже, чем это было бы в ином случае. Свойство следует использовать с осторожностью, так как чрезмерная или неправильная приоритизация может ухудшить производительность.

Приоритет загрузки можно использовать для дополнения предзагрузки, позволяя разработчику повысить приоритет перед менее важными ресурсами, у которых по умолчанию выше приоритет. Например, если разработчик знает, что определенное изображение существенно влияет на Largest Contentful Paint (LCP) веб-сайта, он может добавить <link rel="preload"> для изображения, а затем еще больше повысить приоритет, используя свойство fetchpriority.

Обратите внимание, что внутренний приоритет любой операции загрузки, а также влияние fetchPriority на приоритет, полностью зависят от браузера.

Значение

Строка, представляющая подсказку по приоритету. Возможные значения:

high: Загрузить изображение с высоким приоритетом по отношению к другим изображениям с тем же внутренним приоритетом.
low: Загрузить изображение с низким приоритетом по отношению к другим изображениям с тем же внутренним приоритетом.
auto: Не устанавливать пользовательских предпочтений для приоритета загрузки. Это значение по умолчанию. Оно используется, если значение не задано или задано некорректное значение.

Примеры

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

Спецификации

Спецификация
HTML # dom-img-fetchpriority

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`fetchPriority`	102101–102	102101–102	132	8887–88	17.2	102101–102	132	70	17.2	19.0	102101–102

См. также

HTMLLinkElement.fetchPriority
HTMLScriptElement.fetchPriority
HTTP Link заголовок
Оптимизация загрузки ресурсов с помощью API Fetch Priority для получения информации о том, как этот API влияет на приоритеты в Chrome.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority