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

Question

Часть моей 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);

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

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

Answer 1

Установите счетчик количества изображений с помощью свойства length ^{[документы]} , которое уменьшается при загрузке изображений.

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() ^{[документы]} удаляет из сопоставленного набора изображения, для которых их свойство .completetrue.Это означает, что изображение уже загружено и, возможно, было кэшировано браузером.

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

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

---

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

---

РЕДАКТИРОВАТЬ:

Еще один вариант описанного выше - привязать .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/

Answer 2

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

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

С другой стороны,

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

images.load(function() { 

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

});