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

Question

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

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

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

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

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

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

Answer 1

$(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
            }
        });
    });
});

Answer 2

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

Вот справочник школы W3:

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

Answer 3

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

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

// for loop loading images here

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