使用 JavaScript 同步请求图像？

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 语句来检查图像的 'naturalheight'（如果它为 0，则图像尚未加载）但我对 JavaScript 很陌生并且遇到了困难这个。

我正在寻找一个简单的解决方案（也许是一个环绕函数的解决方案）并会在尝试加载下一张图片之前检查图片是否已加载。

我还需要代码来检查图像加载 100 次，中间有 100 毫秒的延迟。如果此时间后图像还没有加载，请继续下一个。

请一些专家指导我如何编写代码？

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 同步请求图像？

Request images synchronously using JavaScript?

javascript

image

asynchronous

load

synchronous