Подтвердить что ты не робот

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

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

Ответ 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

Ответ 2

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

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

Ответ 3

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

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