5

私は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を表示するように設定されており、画像をプリロードしてから、配列で現在選択されている画像を変更してフェードインする必要があります。これは発生しません。ページが読み込まれた後、gifが表示されず、画像がしばらく読み込まれ続けます。

アドバイスしてください、事前に感謝します！

4

1 に答える 1

6

スティングを作成してドキュメントに挿入し、DOMの一部にする必要があります。あなたがする必要があるのは、次のようなJSImageオブジェクトを作成することです。

// Preload Images:
for(i=0; i<imgCount; i++) { 
  var image_preload = new Image();
  image_preload.src = imgDir+imgArray[i];
}
于 2010-10-05T10:48:42.103 に答える