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>

如您所见，＃source设置为显示preload.gif，然后应预先加载图像，然后#orig应更改并淡入当前在阵列中选择的图像。这不会发生，我从来没有看到gif和图像在页面加载后继续加载一段时间。

请指教，非常感谢提前！

Answer 1

您正在创建一个sting并将其插入到文档中，它应该成为DOM的一部分。你需要做的是创建一个JS Image对象，有点像这样：

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

使用jquery预加载图像数组

1 个答案: