Question

我正在尝试使用JavaScript来控制图像的加载。存储这些图像的服务器一次只能处理1个请求，因此，具有两个或更多图像的网页会导致多个请求被发送到服务器（超载它，导致返回格式错误的图像）。

以下是显示图像的页面示例...

<html>
<head>
    <title>Load Images Synchronously</title>
</head>
<body>
<table align="left" border="1" cellpadding="0" cellspacing="0" style="width:500px;">
    <tbody>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img1" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img2" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img3" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img4" src="" /></td>
        </tr>
        <tr>
            <td height="50px" style="text-align: center;"><img id="img5" src="" /></td>
        </tr>
    </tbody>
</table>
</body>
</html>

如您所见，这包含5个图像标记，这些标记通过html中的脚本加载（如下所示）。设置img标签的scr，会显示图像，但是仍然会异步请求它们。

<script>
document.getElementById("img1").scr="image1.png"
document.getElementById("img2").scr="image2.png"
document.getElementById("img3").scr="image3.png"
document.getElementById("img4").scr="image4.png"
document.getElementById("img5").scr="image5.png"
</script>

我需要知道如何一个接一个地加载这些图像，以免超载我的低功率服务器。

我已经尝试使用IF语句来检查图像的“自然高度”（如果它是0，那么图像还没有加载），但我对JavaScript很陌生，并且很难解决这个问题。

我正在寻找一个简单的解决方案（可能是一个包含函数的解决方案），并会在尝试加载下一个图像之前检查图像是否已加载。

我还要求代码检查图像加载100次，其间延迟100ms。如果此时间后图像未加载，请继续下一步。

请问一些boffin能给我一些关于如何编码的指导吗？

Answer 1

我认为你以错误的方式解决问题。在Javascript中，你不能在一个线程中等待另一个加载图像，你必须使用回调。

您的解决方案可能是添加所有图像以在数组中加载，然后启动第一个图像的加载。在加载的成功回调方法中，执行显示，从数组中删除已加载的图像，然后再次调用该方法以加载数组的新第一个图像。它会一直运行，直到所有图像都在一个接一个地上。

Answer 2

您可以使用图片onload回调来序列化您的图片加载。创建要加载的图像列表以及ID列表。

var srclist = ["src1", "src2", ....];
var idlist = ["img1", "img2", ....];

function loadImage(index){
   var image = document.getElementById(idlist[index]);
   image.onload = function() {
      index++;
      if(index < idlist.length) {
          loadImage(index);
      }
   }
   image.onerror = function() {
      //better handle this
   }
   image.src = srclist[index];
}

loadImage(0);

如果图像加载失败，你需要考虑会发生什么 - 这会抛出索引。

使用JavaScript同步请求图像？

2 个答案: