Question

我是Java语言的新手，我正在尝试异步获取和显示一些图像。这是我到目前为止尝试过的，

for (i=0; i<10; i++){

  var _image= new Image();
  _image.onload = function(){

    var id= "image".concat(i);                    
    document.getElementById(id).src = this.src;

    };

  _image.src = urls[i]);

}

在onLoad事件触发i时发生的异常并非从零开始，因此图像无法正确显示。正确的方法是什么？

Answer 1

由于其他原因，图像可能显示混乱。当您异步获取或显示图像时，每个图像将花费不同的时间来完成该过程。

例如，想象一下图像4很大而图像5很小。图片5可能会在图片4之前显示。因此，我假设您不是获取图像，而是显示图像。

。

最简单的解决方案是通过将每个获取+显示包装在一个Promise中来更改显示逻辑或依次获取和显示这些图像。

此外，您还应在for循环中使用for（让i = 0 ...）。

Answer 2

i只有一个全局值，一旦加载了所有图像，它可能已经设置为10。您可以使用let，这将使计数器成为作用域。这样，您的每个图像回调都将拥有当前计数器值的副本。

for (let i=0; i<10; i++){

  var _image= new Image();
  _image.onload = function(){

    var id= "image".concat(i);                    
    document.getElementById(id).src = this.src;

    };

  _image.src = urls[i]);

}

您可以了解有关here的更多信息。

异步获取并显示多张图片

2 个答案: