如何知道何时使用 javascript 完成图像预加载？答案

【问题标题】：How to know when image preloading is done with javascript?如何知道何时使用 javascript 完成图像预加载？
【发布时间】：2022-05-13 08:09:49
【问题描述】：

根据this extremely popular question，使用 javascript 预加载图像非常简单：

function preloadImage(url) {
  var img=new Image();
  img.src=url;
}

但我想知道的是你怎么知道什么时候完成？我可以做一个小的 setTimeout 和认为它将在一些小的延迟后完成，但连接速度不同，尤其是对于大图像或大量图像，这是不可靠的。

有什么方法可以确定加载完成的时间吗？

【问题讨论】：

这回答了你的问题了吗？ Preloading images with JavaScript
@vanowm 你读过这个问题的第一句和第二句还是直接跳到那个？
提供的链接中的答案正是如此，那么您是否阅读了“非常受欢迎的问题”的答案或只是接受的答案？
好点子。作为记录，如果您更具体地提到您正在链接到该问题的隐藏答案之一，则可以避免这种交流。由于在 SO 上仅链接到一个相关但单独的问题并吹掉某人实际询问的内容很常见，因此我认为这里就是这种情况，因为您的链接文本是问题的标题。
是的，当我提交重复主题的链接时，评论是自动生成的。它实际上改变了我原来的问题链接而不是答案......不得不手动编辑评论......在SO方面没有很好的考虑......

标签： javascript image preload image-loading

【解决方案1】：

图像元素有两个事件，您可以订阅它们以知道图像已加载：onload 和 onerror：

function preloadImage(url, doneCallback) {
  var img=new Image();
  img.src=url;

  img.onload = () => {
    doneCallback();
  }

  img.onerror = () => {
    doneCallback(new Error('Failed to load image ' + url));
  }
}

preloadImage(url, (err) => {
  if (err) {
    console.log(err.message);
  }
  else {
    console.log('Preloading DONE!');
    // do what you want after preloading here!
  }
}

或者，如果您更喜欢 Promises（因此您可以使用 async/await 等）：

function preloadImage(url) {
  var img=new Image();
  img.src=url;

  return new Promise((done, fail) => {
    img.onload = () => {
      done();
    }

    img.onerror = () => {
      fail(new Error('Failed to load image ' + url));
    }
  });
}

async function main () {
    console.log('preloading image!');

    await preloadImage(url);

    console.log('done preloading image!');
}

main().catch((err) => {
  console.log(err.message);
});

【讨论】：

【解决方案2】：

刚刚在 the MDN docs 上为 Image 类找到了我自己的问题的答案。有一个complete 布尔属性告诉你它是否完成。

【讨论】：

这是一个可怕的想法......你基本上让浏览器挂起，直到图像完成加载......使用onload回调
如果您在加载时阻止执行，那么加载将绝不完全的。这是因为浏览器的 javascript 解释器是单线程的，只会在脚本结束时处理网络 IO。由于您的 while 循环永远不会结束，浏览器将永远不会发送网络请求来获取图像
好点！绝对鼓励使用更好的示例用法编写答案，以便我可以接受。与此同时，我至少删掉了我的坏例子。