Предварительная загрузка контента с изображениями с помощью jQuery

Question

Я использую .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>

Answer 1

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

Сказав, что, конечно, вы можете достичь своей первоначальной цели, если вы хотите придерживаться ее:
Используйте пустое изображение 1x1 в качестве атрибута image 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;
  });
});

Answer 2

Изображения загружаются с отдельными запросами HTML, и, очевидно, браузер не может даже начать их загрузку, пока HTML-код в ответе не будет проанализирован.

Если вы знаете URL-адреса изображений перед загрузкойсодержимое, затем вы можете предварительно загрузить их, создав элементы «Image» и ожидая их загрузки (то есть, обрабатывая их события «load» отдельно).

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 указал, что замыкание вокруг обработчика было (в данном случае) ненужным.

Answer 3

Проверьте эта похожая ситуация

Похоже, что основным решением вашей проблемы было бы правильное использование операторов .ready и .load. При правильном использовании вы можете подождать, пока все элементы и медиа-элементы будут загружены в браузер, прежде чем ответ будет передан его обработчику. Я не хочу слишком много рекламировать :) и это действительно отличный ответ.