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

Question

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

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

Вот что у меня есть:

 <script type="text/javascript">

  // Get list of images and build array + set vars

  var imgArray = new Array;
  var imgCount = <?php echo count($files); ?>;
  var imgNum = <?php echo $rand; ?>;
  var imgDir = "<?php echo $dir; ?>";
  var imgBlurDir = "<?php echo $blurdir; ?>";


 $(document).ready(function() {

  <?php
   for ($i=0;$i<count($files);$i++) {
    echo "imgArray[$i]='" . $files[$i] . " ' ; \n";
   }
  ?>


  // Preload Images:
  $('mainImg #orig').html('<img src="images/preload.gif" style="position: relative; top: 310px;" />');
  for(i=0; i<imgCount; i++) { 
   $('<img>').attr("src", imgDir+imgArray[i]).load(function() { $('.profile').append( $(this) )});
   $('<img>').attr("src", imgBlurDir+imgArray[i]).load(function() { $('.profile').append( $(this) )});
  }

  // ^^^^ this doesnt work yet...

  $('#mainImg #orig').html("<img src='"+imgDir+imgArray[imgNum]+"' />").delay(10).fadeIn(1000);
 });

</script>

Как видите, #orig настроен для отображения preload.gif, затем изображения должны быть предварительно загружены, затем #orig должен измениться и исчезнуть в изображении, которое в данный момент выбрано в массиве. Этого не происходит, я никогда не вижу изображения и картинки продолжают загружаться некоторое время после загрузки страницы.

Пожалуйста, сообщите, большое спасибо заранее!

Answer 1

Вы создаете укус и вставляете его в документ, где он должен стать частью DOM. Что вам нужно сделать, это создать объект JS Image, примерно так:

// Preload Images:
for(i=0; i<imgCount; i++) { 
  var image_preload = new Image();
  image_preload.src = imgDir+imgArray[i];
}