Предварительная загрузка контента с изображениями с помощью jQuery
Я использую.load() в jQuery для загрузки html-контента, но в этом контенте есть 3/4 встроенных изображения. Событие успеха срабатывает только в.load(), когда загружен весь HTML-файл, а не изображения. Кто-нибудь знает способ предварительной загрузки всего содержимого страницы?
$('#ajax_loader').hide().load('page.html',function(){
$(this).fadeUp(1000);
});
Это мой простой код (остальная часть находится в полном приложении), загружается в следующем коде (т.е. page.html)
<div>
<div id="slideshow">
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>
3 ответа
Я полагаю, что вы не используете fadeIn
анимация после загрузки изображений из-за снижения производительности. Обычно это хорошая идея fadeIn
затем содержимое начинает загружать изображения, чтобы обеспечить плавную анимацию для максимально возможного количества пользователей.
Сказав это, конечно, вы можете достичь своей первоначальной цели, если вы хотите придерживаться ее:
Используйте пустое изображение 1x1 в качестве изображения src
приписать и сохранить реальный URL в title
,
<div>
<div id="slideshow">
<img src="blank.gif" title="images/img1.jpg" />
<img src="blank.gif" title="images/img2.jpg" />
<img src="blank.gif" title="images/img3.jpg" />
</div>
<p>This is some sample content</p>
</div>
И ваш код становится:
$('#ajax_loader').hide().load('page.html', function(){
var c = 0;
var images = $("#slideshow img");
images.load(function(){
if (++c == images.length) {
$('#ajax_loader').fadeIn(1000);
}
});
images.each(function(){
this.src = this.title;
});
});
Изображения загружаются с отдельными запросами HTML, и, очевидно, браузер не может даже начать загружать их, пока HTML-код в ответе не будет проанализирован.
Если вам известны URL-адреса изображений перед загрузкой содержимого, вы можете предварительно загрузить их, создав элементы "Изображение" и ожидая их загрузки (то есть, обрабатывая их события "загрузки" индивидуально).
var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ];
var c = 0;
for (var i = 0; i < imgUrls.length; ++i) {
var img = new Image();
img.onload = function() {
c += 1;
if (c == imgUrls.length) {
// at this point all images are loaded
// ...
}
};
img.src = imgUrls[i];
}
edit - @galambalazs указал, что замыкание вокруг обработчика было (в данном случае) ненужным.
Проверьте эту похожую ситуацию
Похоже, что основным решением вашей проблемы было бы правильное использование .ready
и .load
оператор. При правильном использовании вы можете подождать, пока все элементы и элементы мультимедиа будут загружены в браузер, прежде чем ответ будет передан его обработчику. Я не хочу слишком много рекламировать:), и это действительно отличный ответ.