Проверьте, загружены ли изображения?

Question

Я ищу sulotion, который проверяет, все ли изображения загружены, прежде чем они будут использованы в слайдере / ротаторе изображений. Я думал о решении, которое показывает кнопки или миниатюры изображений только тогда, когда основные изображения загружены, чтобы пользователь не мог щелкнуть изображение, которое еще не было загружено полностью.

Answer 1

Текст из документов .ready jQuery может помочь провести различие между load а также ready яснее:

Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается, пока все ресурсы, такие как изображения, не будут получены полностью. В большинстве случаев скрипт может быть запущен, как только иерархия DOM будет полностью построена. Обработчик, переданный в.ready(), гарантированно будет выполнен после того, как DOM будет готов, поэтому обычно это лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery.

... и из документов .load:

Событие load отправляется элементу, когда он и все вложенные элементы полностью загружены. Это событие может быть отправлено любому элементу, связанному с URL: изображениям, сценариям, фреймам, фреймам и объекту окна.

Так .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

Answer 2

Вы можете отключить каждый $('img').load() событие и включите связанную ссылку / событие щелчка только после того, как ваша загрузка сработала. Преимущество в том, чтобы делать это изображение за изображением, состоит в том, что если определенные изображения загружаются дольше, вы все равно можете позволить "быстрым" кликать.

$('img').load(function() {
    // find the related link or click event and enable/add it
});

Answer 3

Вместо того, чтобы проверять, все ли изображения загружены, почему бы не создать слайдер / вращатель, используя $(window).load() событие, а не обычное $(document).ready()? $(window).load() ожидает завершения загрузки страницы, включая ресурсы, такие как изображения.

Смотрите: window.onload против body.onload и document.onready (также на переполнении стека).