SVGImageElement: свойство декодирования

Свойство decoding интерфейса SVGImageElement даёт подсказку браузеру о том, следует ли ему выполнять декодирование изображения синхронно или асинхронно.

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

"sync"

Декодировать изображение синхронно для атомарного отображения вместе с другим содержимым.

"async"

Декодировать изображение асинхронно и позволить отобразить другое содержимое до завершения этого процесса.

"auto"

Без предпочтения режима декодирования; браузер решает, что лучше для пользователя. Это значение по умолчанию, но у разных браузеров разные значения по умолчанию:

• Chromium по умолчанию использует "sync".
• Firefox по умолчанию использует "async".
• Safari по умолчанию использует "sync" за исключением небольшого числа случаев.

Свойство decoding даёт подсказку браузеру о том, следует ли ему выполнять декодирование изображения вместе с другими задачами в одном шаге ("sync") или позволить отобразить другое содержимое до завершения этого процесса ("async"). На практике, различия между этими двумя значениями часто сложно заметить, и, где есть различия, часто есть лучший способ.

Для изображений, вставленных в DOM внутри области просмотра, "async" может привести к вспышкам нестилизованного содержимого, в то время как "sync" может привести к небольшому количеству подвисаний. Использование метода SVGImageElement.decode() обычно является лучшим способом достижения атомарного отображения без задержки другого содержимого.

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

В примере ниже, на странице, скорее всего, будет отображено пустое изображение во время загрузки. Установка decoding не предотвратит этого.

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const img = document.createElementNS(SVG_NS, "image");
img.decoding = "sync";
img.setAttribute("href", "img/logo.svg");
svg.appendChild(img);

Вставка изображения после загрузки может сделать свойство decoding более актуальным:

async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const img = document.createElementNS(SVG_NS, "image");
await loadImage("img/logo.svg", img);
// Using `sync` can ensure other content is only updated with the image
img.decoding = "sync";
svg.appendChild(img);
const text = document.createElementNS(SVG_NS, "text");
text.textContent = "Image is fully loaded!";
svg.appendChild(text);

Однако лучшее решение — использовать метод SVGImageElement.decode() для решения этой проблемы. Он позволяет асинхронно декодировать изображение, откладывая его вставку в DOM до полной загрузки и декодирования, тем самым избегая проблемы с пустым изображением, упомянутой выше. Это особенно полезно, если вы динамически меняете существующее изображение на новое, а также предотвращает задержку ненужных перерисовок вне этого кода во время декодирования изображения.

Использование img.decoding = "async" может предотвратить задержку отображения другого содержимого, если время декодирования длительное:

const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");

const img = document.createElementNS(SVG_NS, "image");
img.decoding = "async";
img.setAttribute("href", "img/logo.svg");
svg.appendChild(img);

• Метод SVGImageElement.decode()
• Элемент SVG <image> и атрибут decoding.