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

Я использую 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 должен измениться и исчезнуть в изображении, которое в данный момент выбрано в массиве. Этого не происходит, я никогда не вижу GIF, и изображения продолжают загружаться некоторое время после загрузки страницы.

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


jquery preload image-preloader
person lunarben    schedule 05.10.2010    source источник
comment
Немного не по теме... Выглядит проще инициализировать imgArray следующим образом: var imgArray = ["<?php echo implode($files, '", "'); ?>"];.   -  person Edgar Bonet    schedule 05.10.2010
comment
@ Эдгар Боне: да, хорошая мысль. Я предпочитаю способ OP, хотя он более читаем для меня.   -  person Piskvor left the building    schedule 05.10.2010

Ответы (1)


arrow_upward
6
arrow_downward

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

// Preload Images:
for(i=0; i<imgCount; i++) { 
  var image_preload = new Image();
  image_preload.src = imgDir+imgArray[i];
}
person Piskvor left the building    schedule 05.10.2010
comment
Спасибо за быстрый ответ. Это работает. Я вижу загрузку изображений, однако остальная часть страницы все еще загружается во время загрузки изображений? - person lunarben; 05.10.2010
comment
@Lunarben: поскольку блок кода находится внутри `$(document).ready`, он вызывается, как только загружается DOM, то есть некоторые части страницы все еще могут загружаться (другие изображения, таблицы стилей IIRC и т. д.) . - person Piskvor left the building; 05.10.2010
comment
Я не думал об этом! кажется, теперь работает нормально. Большое тебе спасибо! :) - person lunarben; 05.10.2010