Как узнать, когда загружаются все изображения внутри определенного "div"?

Часть моей HTML-страницы следующая div:

<div id="images_wrapper">
  <img ... />
  <img ... />
  <img ... />
  ...
</div>

Изначально этот div скрыт, и я показываю его только при загрузке всех изображений:

$(window).load(show_images_wrapper);

Однако, если я не ошибаюсь, show_images_wrapper будет вызываться только при загрузке всей страницы. Я бы хотел, чтобы show_images_wrapper вызывался, как только все изображения внутри images_wrapper были загружены, и не ждите, пока не будет загружена вся страница.

Я пробовал:

$("#images_wrapper").load(show_images_wrapper);

но это не сработало.

Как мне это сделать?

Ответы

Ответ 1

Настройте счетчик количества изображений с помощью length [docs], которое уменьшается при загрузке изображений.

var imgs = $("#images_wrapper > img").not(function() { return this.complete; });
var count = imgs.length;

if (count) {
    imgs.load(function() {
        count--;
        if (!count) {
            $("#images_wrapper").show();
            alert('all done');
        }
    });
} else {
    $("#images_wrapper").show();
}

Метод not() [docs] удаляет из сопоставленного задайте изображения, где их свойство .complete true. Это означает, что изображение уже загружено и, возможно, кэшировано браузером.

Конечно, метод load() [docs] срабатывает, поскольку каждое изображение завершает загрузку.

Пример: http://jsfiddle.net/uhmAR/1/

РЕДАКТИРОВАТЬ: Изменено так, чтобы контейнер показывал, все ли изображения были кэшированы.

EDIT:

Другой вариант выше - привязать .load() ко всем изображениям и использовать filter() [docs], чтобы получить те, которые являются .complete, и просто вручную вызывают .load() на них.

Это устраняет необходимость в инструкции if/else.

var imgs = $("#images_wrapper > img")
var count = imgs.length;

imgs.load(function() {
    count--;
    if (!count) {
        $("#images_wrapper").show();
        alert('all done');
    }
}).filter(function() { return this.complete; }).load();

Пример: http://jsfiddle.net/uhmAR/3/

Ответ 2

Я написал плагин jQuery, который может это сделать.

$('#images_wrapper').waitForImages(function() {
   // Done.
});

В качестве альтернативы,

var images = $('#images_wrapper img'),
    imagesLength = images.length;

images.load(function() { 

    if ( ! --imagesLength) {
        // Done.
    }

});