Javascript圖像預加載器不顯示狀態

我把放置在一起的圖像預加載器工作正常，但不起作用的是更新每個已加載的圖像後的狀態。相反，所有圖像都被加載，「完成」（最後一行）是唯一顯示出來的東西。當我使用alert而不是innerHTML命令時它確實有效，但這顯然沒用。我究竟做錯了什麼？Javascript圖像預加載器不顯示狀態

<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>

來源

2012-04-03 user1293977

當你設置'imageObj.src =圖像[I]'，它實際上將圖像加載到內存中，或者它只是設置屬性？ – 2012-04-03 13:44:57

要顯示圖像加載進度，您需要掛鉤到圖像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>

來源

2012-04-03 13:47:39 jfriend00

耶，非常感謝你的時間！我不得不作一點修正，你在loadPercent變量中輸入了一個錯字： var loadPercent = Math.round（100 *（cnt/list.length））; – user1293977 2012-04-03 14:17:20

@ user1293977 - 好，我修正了這個錯字。 – jfriend00 2012-04-03 14:19:16

for循環幾乎會立即發生，因爲圖像異步加載;設置imageObj.src將剛剛啓動圖像請求並轉到下一個。它不會阻止循環的執行。這會導致您看到的效果，即代碼的最後一行會立即執行。

我覺得你要找的是JavaScript Image onload事件，當圖像有完成加載時會觸發。

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

密碼從this article捏。

來源

2012-04-03 13:45:10

Javascript圖像預加載器不顯示狀態

回答

相關問題