Есть ли способ избежать повторной загрузки источника (изображения, аудио, изображения) при использовании внутреннего HTML или cloneNode для их клонирования?

Question

Я обнаружил, что при использовании внутреннего HTML для клонирования узла. Он автоматически повторно загрузит тот же источник снова. Есть ли способ избежать такого поведения?

Answer 1

Вы действительно не можете избежать поведения - когда элемент <img> вставляется в DOM или изменяется src, браузер получает ресурс.

Вы можете уменьшить влияние, хотя - там На ум приходит несколько способов:

1. Использовать эффективное кэширование. Когда клонированное изображение приводит к ответу 304, данные изображения не будут повторно переданы, но будет использоваться локально кэшированная версия.
2. Используйте сервисного работника для кэширования изображения и используйте «cache- первая »стратегия, при которой работник сервиса всегда немедленно отвечает локальной версией в кэше.
3. Выполните fetch для изображения, создайте URL-адрес данных и используйте URL-адрес данных в качестве источника для исходного и клонированных изображений. , Обратите внимание, что из-за кодировки URL-адреса данных больше, чем фактические двоичные данные.

Вот пример для (3):

const img = new Image();
document.body.appendChild(img);
fetch('https://example.com/image.jpg')
.then(res => res.blob())
.then(blob => URL.createObjectURL(blob))
.then(dataUrl => {
  // load the image via the created data URI
  img.src = dataUrl;
  // clone the image
  setTimeout(() => {
    const clone = img.cloneNode();
    document.body.appendChild(clone); // won't request the image from the server again.
  }, 1000);
});