Предварительная загрузка нескольких изображений перед их отображением

Question

У меня есть этот код

var html = '';
data.forEach(function (item, index) {
   html += '<img src="' + item.src + '">';
}
$('.container').append(html);

Как мне дождаться предварительной загрузки изображений перед их отображением?

Я увидел что-то подобное:

var img=new Image();
img.src=url;

Но как мне узнать, когда изображения были предварительно загружены для вызова функции append ()?

Answer 1

Разница в ваших двух примерах заключается в том, что один создает изображения через API изображений, а другой - конкатенацию строк.

Чтобы дождаться загрузки всех изображений, нужно установить условие, которое проверяет, все ли они были созданы.

var html = '';
data.forEach(function (item, index) {
   if( data[index] !== -1){
       html += '<img src="' + item.src + '">';
   } else {
       $('.container').append(html);
   }
}