Ожидание загрузки изображения в JavaScript

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Обратите внимание, что это важно делать в указанном выше порядке: Сначала прикрепите обработчик, затем установите src. Если вы сделаете наоборот, а изображение находится в кеше, вы можете пропустить событие. В браузерах JavaScript выполняется в одном потоке (если вы не используете веб-воркеры), но браузеры не являются однопоточными. Совершенно верно, что браузер видит src, определяет, что ресурс доступен, загружает его, запускает событие, просматривает элемент, чтобы увидеть, есть ли у него какие-либо обработчики, которые должны быть поставлены в очередь для обратного вызова, не видеть их, и завершить обработка событий, все между строкой src и строкой, присоединяющей обработчик. (Обратные вызовы не происходили бы между строками, если бы они были зарегистрированы, они бы ждали в очереди, но если их нет, событие не должно ждать.)

Если вы используете jQuery, вы можете использовать его событие load.

Взгляните на пример:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});

просто оберните загрузку изображения в функцию с обещанием, а затем вызовите ее с помощью await.

async drawImg(ctx, image){

    return new Promise(resolve => {

          image.onload = function () {
                ctx.drawImage(image, 10, 10, 200, 180);
                resolve('resolved');
             }

    });

  }

он должен работать нормально

принятый ответ устарел, но показывает базовый _ 1_ обратный вызов. В настоящее время вы, вероятно, захотите обещать загрузку изображения, чтобы избежать ада обратных вызовов.

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

Вот еще одно обещание Image, более общее. Отказ в обработчике onerror и передача фактического объекта изображения в преобразователь важны для того, чтобы сделать функцию минимально пригодной для повторного использования.

Улучшения могут включать дополнительные параметры (например, crossOrigin). Объект settings или предоставление Image в качестве параметра - это еще один подход к обобщению функции (установка src запускает запрос, поэтому он должен идти последним после добавления обработчиков).

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

loadImage("http://placekitten.com/90/100").then(image => 
  console.log(image, `\nloaded? ${image.complete}`)
);

С помощью указанной выше функции Promise.all может использоваться для параллельной загрузки пакета изображений ( Promise.allSettled полезно, если вы хотите продолжить, даже если некоторые изображения не загружаются).

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  })  
;

const imageUrls = [
  "http://placekitten.com/85/150",
  "http://placekitten.com/85/130",
  "http://placekitten.com/85/110",
];
Promise.all(imageUrls.map(loadImage)).then(images => {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");
  images.forEach((image, i) =>
    ctx.drawImage(image, i * 90, 0, image.width, image.height)
  );
});

Как насчет события загрузки окна?

window.addEventListener('load', (event) => {
  //do stuff with images
});

or

window.onload = (event) => {
  //do stuff with images
};

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

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

У меня была медленная загрузка изображения CAPTCHA (1st_image) на моей странице, и я хотел отобразить другое изображение (2nd_image) только ПОСЛЕ загрузки изображения CAPTCHA (1st_image). Поэтому мне пришлось дождаться загрузки изображения CAPTCHA (1st_image).

Вот решение, которое отлично работает, когда сначала загружается изображение, а затем загружается другое изображение (не забудьте отобразить изображение «пожалуйста, подождите!», Пока они ждут загрузки другого изображения):

<script>
    function checkImageLoad() {
        if (document.getElementById("1st_image").complete == true) {
            console.log("1st_image Loaded!");
        }
        document.getElementById("2nd_image").src = "http://example.org/2nd_image.png";
    }
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://example.org/1st_image.png">
<img id="2nd_image" src="http://example.org/loading_please_wait.gif">

Либо скорость Интернета низкая, либо высокая, и браузер будет ждать, пока вся страница загрузится со всеми изображениями (даже если они связаны внешними ссылками), а затем выполнит функцию, поэтому второе изображение отображается только после загрузки первого изображения. отлично.

Дополнительное примечание: вы можете использовать URL-адрес веб-страницы в src изображения, чтобы сначала загрузить веб-страницу, а затем показать изображение. Цель состоит в том, чтобы загрузить файл cookie с внешней веб-страницы, который может повлиять на отображаемое второе изображение (например, CAPTCHA).