在執行腳本之前等待大量已加載的圖像

Question

我有一個隱藏的div標簽，它將用於運行總計已加載的圖像：

<div id="ImagesLoaded">0</div>

當圖像頁面運行時，它將加載8張圖像，並且每次onload都會向“ ImagesLoaded”添加1張圖像。 一些圖像可能比其他圖像大，因此頁面加載時間可能會有所不同。 當“ ImagesLoaded”為8時，我要運行一個腳本來調整屏幕，這將基於圖像的大小和方向。

我想知道的是：如何在后台運行一個腳本，該腳本每100毫秒檢查一次已加載多少圖像？ 當有8張圖像時，它應該停止查看該圖像的數量，並運行另一個腳本。

有任何想法嗎？

Answer 1

 onLoad = "addOneToImagesLoaded();"

和js：

 function addOneToImagesLoaded(){
      current_count = parseInt(getElementById('ImagesLoaded').innerHTML);
      current_count = current_count+1;
      getElementById('ImagesLoaded').innerHTML = current_count.toString();
      if (current_count == 8){
           YOUR LOGIC GOES HERE
      }
 }

Answer 2

您可以使用setInterval ：

var imageInterval = setInterval(checkingFunction, 100);

function checkingFunction()
{
    if (count == 8)
    {
         // do what you want to do
         clearInterval(imageInterval);
    }
}

另外，您可以在onload處理程序中調用如下函數：

function imageLoaded()
{
     count++;
     if (count == 8)
     {
         // do what you want to do
     }
}

在兩個示例中，我都使用全局count變量而不是div元素來存儲值。