Дождаться полной загрузки картинок с помощью 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 и т.п.

No responses yet

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