Показать все изображения только после полной загрузки
В
<div id="all-images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
Я хочу показать все изображения id = "all-images" только тогда, когда все изображения внутри этого идентификатора будут полностью загружены (JQuery).
И перед загрузкой всех изображений в этом разделе показан текст "Загрузка.."
Ответы
Ответ 1
Предполагая, что ваш div предварительно скрыт:
$("#loadingDiv").show();
var nImages = $("#all-images").length;
var loadCounter = 0;
//binds onload event listner to images
$("#all-images img").on("load", function() {
loadCounter++;
if(nImages == loadCounter) {
$(this).parent().show();
$("#loadingDiv").hide();
}
}).each(function() {
// attempt to defeat cases where load event does not fire
// on cached images
if(this.complete) $(this).trigger("load");
});
Ответ 2
http://api.jquery.com/load-event/
Попробуйте подключить обработчик события загрузки к вашему div. Если API должен быть доверен, это событие будет запущено, когда будут загружены все субимаги.
Итак, у меня был бы какой-то обработчик document.onready, который скроет ваши изображения и вставляет текст "Загрузка...", а затем ваш обработчик события загрузки покажет ваши изображения и удалит загружаемый текст.
Надеюсь, что это поможет.
