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

Question

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

Answer 1

你想看一下load事件.

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()从我们简单传递的数组中删除.