JavaScript 图片预加载

这个是简单版本的预加载图片

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

用 Promise 封装一下

const preloadImage = (src) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = resolve;
    image.onerror = reject;
    image.src = src;
  });
};

const preloadImages = (srcs) => {
  return Promise.all(srcs.map(preloadImage));
};

preloadImages(['./img/2022-prize-list.png', './img/2022-pbg.png']).then(() => {
  console.log('images loaded');
});

后记

• https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
• https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache
• https://stackoverflow.com/questions/62314548/how-to-preload-images-for-javascript-slideshow