Дождаться полной загрузки картинок с помощью jQuery

Вопрос

Если сделать на jQuery так:

$(function() {
   alert("DOM загружен, но изображения могут ещё загружаться.");
});

То этот код выполняется только после полной загрузки дерева DOM. Но если не все картинки загрузились, код всё-равно выполняется.

Что, если я хочу сделать некоторую анимацию из картинок путём смены их одна за другой? Тогда мой код не должен выполнятся, пока не загрузятся все картинки. Что jQuery может предложить в этом случае?

Я знаю, что для решения данной проблемы можно поступить так:

<body onload="finished()">

Но мне хочется найти более красивое решение.


Ответ №1

Через $(window).load() можно задать функцию, которая выполниться после того, как все элементы загрузятся.
На самом деле я никогда так не делаю, мне обычно достаточно знать, что DOM загружен, но предполагаю, что в Вашем случае код должен выглядеть так:

$(window).load(
    function() {
        // Тут картинки уже загружены
    }
);


Ответ №2

Есть один плагин для jQuery, который позволяет дождаться загрузки картинок не полностью в документе, а в определённом элементе, который задаётся с помощью селектора. Плагин можно найти здесь.
Пример использования:

$('#mydiv').waitForImages(function() {
    alert('Все картинки загружены.');
});

Если верить автору, плагин дожидается загрузки не только изображений IMG, а также изображений, заданных в CSS-свойствах background-image, list-style-image и т.п.

1 комментарий

Добавить комментарий


(обязательно)