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

【问题标题】：Load images one after another in JavaScript在 JavaScript 中一个接一个地加载图像
【发布时间】：2015-10-14 02:23:27
【问题描述】：

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

【问题讨论】：

我有像 arr['1.jpg', '2.jpg','3.jpg'] 这样的数组包含图像并先加载 1.jpg 然后在完成 1.jpg 加载 2.jpg所以所有......，那些完整加载的图像将存储在另一个数组中

标签： javascript javascript-events

【解决方案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() 从我们简单传递的数组中删除。

【讨论】：

+1 你应该在设置 img.onload 之前调用 shift() - 我知道它可以工作，但它令人困惑：如果你不太了解 JavaScript，你可以假设images 数组是为调用而创建的，shift() 没有效果（或者在准备函数调用之后才会产生效果）。