在JavaScript中预加载多个图像的最佳方法是什么？

async function preloadImages(imageUrls) {
  const promises = imageUrls.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = url;
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
    });
  });

  return Promise.all(promises);
}

// 使用示例
const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

preloadImages(imageUrls)
  .then(images => {
    console.log('All images have been preloaded:', images);
  })
  .catch(error => {
    console.error('Error while preloading images:', error);
  });