javascript 如何知道图像预加载何时完成？

Question

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

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

但是我想知道的是你怎么知道什么时候完成的？我可以只做一个小的 setTimeout 并假设它会在一些小的延迟后完成，但是连接速度不同，特别是对于大图像或大量图像，这是不可靠的。

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

Answer 1

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

Answer 2

图像元素有两个事件，您可以订阅它们以了解图像已加载：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);
});

javascript 如何知道图像预加载何时完成？

How to know when image preloading is done with javascript?

javascript

image

preload

image-loading