当前位置：文江博客话题详情

在 JavaScript 中依次加载图像

发布于 2025-01-08 00:02:17 字数 124 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

止于盛夏 2025-01-15 00:02:17

您想查看加载事件。

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() 从我们刚刚传递的数组中删除了。

You want to have a look at the load event.

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

whenever an image is loaded, the load event is fired. When that happens, we execute the loadImagesInSequence() again. We won't load the same image twice, as Array.shift() removed from the array we simply passed through.

回复收藏 0 原文

~没有更多了~