Выполните анализ изображения только после того, как изображения уже загружены

Question

Я ищу способ масштабирования изображений веб-страницы для мобильных устройств. Мой подход заключается в том, чтобы сохранять размеры каждого изображения с использованием JavaScript, и если размер экрана пользователя меньше определенного значения, все изображения будут изменены с использованием JavaScript. Моя проблема в том, что следующая функция не обнаруживает, загружены ли уже изображения, поэтому результат будет 0 для не загруженных изображений. У меня вопрос, как я могу реализовать проверку, чтобы функция вычисляла размер изображения только после того, как изображение было полностью загружено? Я не использую jQuery.

function storeImageSizes() {
  isizes = [];
  imgs = document.getElementById('content').getElementsByTagName('img');
  for (var i = 0; i < imgs.length; i++) {
    isizes[i] = [
      window.getComputedStyle(imgs[i]).getPropertyValue('width').replace('px', '') * 1,
      window.getComputedStyle(imgs[i]).getPropertyValue('height').replace('px', '') * 1
    ];
  }
}

Answer 1

Вы пробовали image.onload ?
Также отметьте этот ответ .Он подчеркивает использование image.onload, а также позволяет избежать проблем с кэшем браузера.

Answer 2

Вызов storeImageSizes () в функции window.load должен решить проблему

$( window ).on( "load", function() { ... })

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

Обратите внимание на разницу между document.ready и window.load. document.ready запускается, когда DOM готов, где, как window.load, запускается после загрузки всей страницы, то есть images / iframes и т. д.

Взять отсюда ссылку Простой пример с использованием Jquery

Answer 3

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

document.querySelector('#image').addEventListener('load', storeImageSizes);

Answer 4

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

document.addEventListener("load", (function(){
   isizes = [];
  imgs = document.getElementById('content').getElementsByTagName('img');
  for (var i = 0; i < imgs.length; i++) {
    isizes[i] = [
      window.getComputedStyle(imgs[i]).getPropertyValue('width').replace('px', '') * 1,
      window.getComputedStyle(imgs[i]).getPropertyValue('height').replace('px', '') * 1
    ];
  }
})