Дождаться загрузки изображения?

Question

[Emanue1]

Я использую такой код:

var first = new Image();
var second = new Image();

Мне нужно после того как загрузятся эти две картинки запустить функцию.
Я знаю как выполнить эту задачу, когда одна картинка. Вот так:

var one = new Image();
one.onload = function() { 
   runFunction();   
}

Как сделать аналогично, но с двумя картинками??

Answer 1

[Negwereth]

Я б так как-то делал.

function loadImageAsync(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = resolve;
  });
}

Promise.all([
  loadImageAsync("img.jpg"),
  loadImageAsync("img.png")
])
  .then(images => {
    //do magic
  });

Answer 2

[Stalker_RED]

var a = new Image();
var b = new Image();
var loadedCounter = 0;
a.src = '//lorempixel.com/400/200/sports/'
b.src = '//lorempixel.com/400/200/cats/'
a.onload = b.onload = function() {
   loadedCounter++;
   if (loadedCounter == 2) {
     runFunction();
   }
}

Comments

[Emanue1]

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

[Stalker_RED]

Emanue1: Видимо я неправильно понял ваш вопрос. Обновил ответ.