Javascriptイメージプリローダーのステータスが表示されません

Question

正常に動作するイメージプリローダーを組み込みましたが、ロードされたすべてのイメージのステータスが更新されません。代わりに、すべての画像がロードされ、「完了」（最後の行）が表示されます。 innerHTMLコマンドの代わりにアラートを使用するとうまくいくが、それは明らかに役に立たない。私は間違って何をしていますか？

<div id="preloader"> 
<span id="preloader_status"> </span> 
<script language="JavaScript"> 
    imageObj = new Image(); 
    images = new Array(); 
    images[0]="bigimage.gif" 
    images[1]="anotherbigimage.gif" 
    /* and so on */ 

    var i = 0; 
    var o = (images.length); 

    for (i=0;i<o;i++) { 
     var status = (Math.round(100*(i/o))); 
     imageObj.src=images[i]; 
     document.getElementById("preloader_status").innerHTML = status; 
    } 
    document.getElementById("preloader_status").innerHTML = "done"; 
</script> 
</div> 

Answer 1

イメージのロードの進行状況を表示するには、イメージのロードが実際に完了したときに追跡できるように、イメージのためにonloadイベントにフックする必要があります。画像は非同期にロードされるので、.srcは画像の読み込みを開始するだけです。 onloadハンドラが呼び出されたときまで完了しません。そのため、イメージが実際にロードされた時点を追跡していないため、既存のコードはただちに「完了」と表示されます。

さらに、以前の画像読み込みを中止する同じ画像オブジェクトに新しい.src値を順番に割り当てていました。ロードする新しいイメージごとに新しいイメージオブジェクトを作成する必要があります。

あなたはこのようなあなたのコードを修正することができます

<div id="preloader"> 
<span id="preloader_status"> </span> 
<script language="JavaScript"> 
    var imageSrcs = [ 
     "bigimage.gif", 
     "anotherbigimage.gif" 
     /* and so on */ 
    ]; 

    function preloadImages(list, statusID) { 
     var img, cnt = 0; 
     var progress = document.getElementById(statusID); 
     var preloads = []; 

     for (var i = 0; i < list.length; i++) { 
      img = new Image(); 
      img.onload = function() { 
       ++cnt; 
       var loadPercent = Math.round(100*(cnt/list.length)); 
       progress.innerHTML = loadPercent; 
       if (cnt == list.length) { 
        progress.innerHTML = "done"; 
       } 
      } 
      img.src = list[i]; 
      preloads.push(img); 
     } 
    } 

    preloadImages(imageSrcs, "preloader_status"); 
</script> 
</div> 

Answer 2

イメージが非同期に読み込まれるため、forループはほぼ即座に発生します。 imageObj.srcを設定すると、画像要求が開始され、次の画像に移ります。ループの実行をブロックしません。これにより、表示されている効果が発生します。つまり、コードの最後の行が直ちに実行されます。

あなたが探しているものは、が完了したときに起動するJavaScript Image onloadイベントです。が終了しました。

var image = new Image(); 
image.onload = function() { 
    // always called 
    alert('image loaded'); 
}; 
image.src = 'image.jpg'; 

コードがthis articleに挟まれています。