Ответ 1
Текст из . ready jQuery docs может помочь сделать различие между load
и ready
более понятным:
В то время как JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается до тех пор, пока все активы, такие как изображения, не будут полностью получены. В большинстве случаев script может быть запущен, как только иерархия DOM будет полностью построена. Обработчик, переданный в .ready(), должен быть выполнен после того, как DOM готов, поэтому это обычно лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery.
... и из . load docs:
Событие загрузки отправляется элементу, когда он и все подэлементы были полностью загружены. Это событие может быть отправлено любому элементу, связанному с URL: изображениями, сценариями, фреймами, iframe и объектом window.
Итак, .load
- это то, что вы ищете. Что хорошего в этом событии, так это то, что вы можете прикрепить его только к подмножеству DOM. Скажем, у вас есть ваши изображения слайд-шоу в div вроде этого:
<div class="slideshow" style="display:none">
<img src="image1.png"/>
<img src="image2.png"/>
<img src="image3.png"/>
<img src="image4.png"/>
<img src="image5.png"/>
</div>
... тогда вы могли бы использовать .load
только в контейнере .slideshow
для запуска, как только все изображения в контейнере были загружены, независимо от других изображений на странице.
$('.slideshow img').load(function(){
$('.slideshow').show().slideshowPlugin();
});
(Я привел пример display:none
, который будет скрывать изображения во время их загрузки.)
Обновление (03.04.2013)
Этот метод устарел, поскольку версия jQuery версии 1.8