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

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