使用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 应该更改并淡入数组中当前选择的图像。但事实并非如此，我从未看到过 gif 图像，而页面加载后图像仍在继续加载。

请提供建议，非常感谢！

- lunarben

---

有点离题了... 用这种方式初始化imgArray看起来更简单：var imgArray = ["<?php echo implode($files, '", "'); ?>"];. - Edgar Bonet

@Edgar Bonet：是的，好观点。尽管如此，我更喜欢原帖的方法，我觉得更易读。 - Piskvor left the building

Answer 1

您正在创建一个字符串并将其插入到文档中，它应该成为DOM的一部分。您需要做的是创建一个JS Image对象，类似于以下内容：

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

- Piskvor left the building

---

谢谢您的快速回复。这个方法可以让我看到图片正在加载，但是在图片加载时，页面的其余部分仍在加载中？ - lunarben

@Lunarben：由于代码块位于 $(document).ready 内部，因此它会在 DOM 加载完成后立即被调用 - 也就是说，页面的某些部分仍然可以在加载（例如其他图像、样式表等）。 - Piskvor left the building