javascript - 在执行脚本之前等待一些加载的图像

Question

我有一个隐藏的 div 标签，它将用于加载的图像总数：

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

当一个图像页面运行时，它会加载 8 个图像，并且每个图像都会onload添加 1 到“ImagesLoaded”。有些图像可能比其他图像大，因此页面加载时间可能会有所不同。当“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 元素来存储值。