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

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