在JavaScript中逐个加载图像

我的问题是，我有多个图像，想像预加载一样加载，但问题是我想在完成第一个图像后开始加载第二个图像。在我当前的代码中，我将所有图像存储在一个数组中，并使用循环加载所有图像（将数组中所有图像的源提供给一个图像对象），然后开始加载所有图像

您希望查看加载事件

function loadImagesInSequence(images) {
  if (!images.length) {
    return;
  }

  var img = new Image(),
      url = images.shift();

  img.onload = function(){ loadImagesInSequence(images) };
  img.src = url;
}

loadImagesInSequence(['a.png', 'b.png', 'c.png']);

---

每当加载映像时，都会触发加载事件。发生这种情况时，我们再次执行loadImagesInSequence（）。我们不会两次加载同一个图像，因为

Array.shift（）

只是从我们所经过的数组中删除了。

+1在设置

img.onload

之前，您应该调用

shift（）

-我知道它可以工作，但很混乱：如果您对JavaScript不太了解，您可以假设“复制”为调用创建了一个images数组，而

shift（）

没有任何效果（或者效果发生在准备函数调用之后）。我让arr['1.jpg'、'2.jpg'、'3.jpg']这样的数组包含图像，并在完成1后首先加载1.jpg。jpg load 2.jpg等所有，映像完成加载后将存储在另一个数组中