Ожидание завершения цикла jquery .each ()

Question

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

 $.each(items, function(){
     $('<img/>').attr('src', $(this).attr('src')).load(function(){
          myArray.push(this.width);
          myArray.push(this.height);
     });
 });
 console.log(myArray.length);

Консоль всегда записывает 0, потому что я подозреваю, что console.log выполняется до завершения цикла .each. Это было бы правильно? И как мне обойти это? Большое спасибо.

Answer 1

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

Вы можете использовать метод JQuery Ajax, таким образом вы можете установить синхронный вызов, что-то вроде (не проверено, просто у меня в голове):

jQuery.ajax({
     url:    'http://url-to-img',
     success: function(result) {
                 myArray.push(this.width);
                 myArray.push(this.height);
              },
     async:   false
});   

должен сделать трюк. Посмотрите справочную документацию по Jquery ajax с сайта JQuery для получения дополнительной информации: http://api.jquery.com/jQuery.ajax/

Обратите внимание, вы не можете использовать синхронные междоменные вызовы.

Answer 2

Назначьте значение, которое увеличивает нагрузку, и затем сравните значение со следующим циклом.

Псевдокод:

i=0;
if(i<images){
load image here
image.onload = i++;
}

Answer 3

load ^{документы} вызывается асинхронно. Каждый цикл завершен, но загрузка изображений не завершена