Блокировка Javascript до полной загрузки изображения?

Question

Я использую JavaScript для предварительной загрузки нескольких изображений с помощью следующего кода:

// do the following for each image where 'this' is the path 
(new Image()).src = this; 

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

Моя проблема в том, что я хочу заблокировать до тех пор, пока не будет загружена актуальной загрузке. Другими словами, я хочу показать диалог «загрузка изображения» пользователю, пока все изображения не закончат загрузку.

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

Поскольку кажется, что фактическая загрузка асинхронна, есть ли способ заблокировать пока все загрузки не будут завершены?

Answer 1

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

Вот ссылка на W3 школы:

http://www.w3schools.com/jsref/event_img_onload.asp

Answer 2

Вы можете скрыть div, у которого есть контент, который вы предварительно загрузите изображения, пока отображается «загрузка» div до тех пор, пока предварительная загрузка не будет завершена. Это будет выглядеть примерно так:

$('#content').hide(); 
$('#loading').show(); 

// for loop loading images here 

$('#loading').hide(); 
$('#content').show(); 

Answer 3

$(function() { 
    var imgs = $('img'); 
    var length = imgs.length; 
    var loaded = 0; 
    $('img').hide().each(function() { 
     $(this).bind('load', function() { 
      if ((++loaded) === length) { 
       imgs.show(); 
      }else { 
       //show images are still downloading 
      } 
     }); 
    }); 
});