HTMLImageElement: полное свойство

Только для чтения HTMLImageElement интерфейса свойство complete — булево значение, которое указывает, загрузилась ли изображение полностью.

Булево значение, которое равно true , если изображение загрузилось полностью; в противном случае значение равно false.

Изображение считается полностью загруженным, если выполняется любое из следующих условий:

• Атрибут src или srcset не задан.
• Атрибут srcset отсутствует, а атрибут src, если задан, является пустой строкой ("").
• Ресурс изображения полностью получен и помещен в очередь для отрисовки/композирования.
• Элемент изображения ранее определил, что изображение полностью доступно и готово к использованию.
• Изображение «неправильное»; то есть изображение не загрузилось из-за ошибки или потому, что загрузка изображений отключена.

Стоит отметить, что из-за асинхронного получения изображения значение complete может измениться во время выполнения вашего скрипта.

Рассмотрим приложение фотогалереи, которое предоставляет возможность открывать изображения в режиме полноэкранного просмотра для улучшенного просмотра и редактирования изображения. Эти фотографии могут быть очень большими, поэтому вы не хотите ждать их загрузки, поэтому ваш код использует async/await для загрузки изображений в фоновом режиме.

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

Поэтому функция fixRedEyeCommand(), которая вызывается кнопкой, запускающей удаление красных глаз, проверяет значение свойства complete изображения полноэкранного просмотра перед выполнением своей работы. Это показано в коде ниже.

let lightboxElem = document.querySelector("#lightbox");
let lightboxImgElem = lightboxElem.querySelector("img");
let lightboxControlsElem = lightboxElem.querySelector(".toolbar");

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

async function lightBox(url) {
  lightboxElem.style.display = "block";
  await loadImage("https://some-site.net/huge-image.jpg", lightboxImgElem);
  lightboxControlsElem.disabled = false;
}

// …

function fixRedEyeCommand() {
  if (lightboxElem.style.display === "block" && lightboxImgElem.complete) {
    fixRedEye(lightboxImgElem);
  } else {
    /* can't start doing this until the image is fully loaded */
  }
}