在JavaScript中一个接一个地加载图像

Question

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

Answer 1

您想要查看加载事件。

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']);

无论何时加载图像，都会触发load事件。当发生这种情况时，我们再次执行loadImagesInSequence（）。我们不会加载相同的图像两次，因为从我们简单传递的数组中删除了Array.shift()。