js等待多张图片加载完

在JavaScript中，如果你想等待多张图片加载完成后再执行某些操作，你可以使用Promise.all结合Image对象来完成这个任务。这里有一个基本的示例，展示了如何做到这一点：

方法1：使用Promise.all

// 创建一个函数来加载图片并返回一个promise
function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject(new Error(`图片加载失败: ${url}`));
        img.src = url;
    });
}
 
// 图片URL数组
const imageUrls = [
    'path/to/your/image1.jpg',
    'path/to/your/image2.jpg',
    'path/to/your/image3.jpg'
];
 
// 使用Promise.all等待所有图片加载完成
Promise.all(imageUrls.map(url => loadImage(url)))
.then(images => {
    console.log('所有图片已加载');
    // 在这里处理加载完成的图片，例如：
    images.forEach(img => {
        document.body.appendChild(img); // 将图片添加到文档中
    });
})
.catch(error => {
    console.error('图片加载失败:', error);
});

方法2：使用原生Promise和addEventListener（不推荐在现代浏览器中使用，因为Promise.all更简洁）

虽然不推荐，但在某些情况下，如果你想要更细粒度的控制，可以使用以下方法：

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.addEventListener('load', () => resolve(img));
        img.addEventListener('error', () => reject(new Error(`图片加载失败: ${url}`)));
        img.src = url;
    });
}
 
const imagePromises = imageUrls.map(url => loadImage(url));
const firstImagePromise = imagePromises[0]; // 你可以选择性地只等待第一个图片加载完成
firstImagePromise.then(img => {
    console.log('第一个图片已加载');
    // 处理第一个加载完成的图片...
}).catch(error => {
    console.error('第一个图片加载失败:', error);
});

方法3：使用async/await和Promise.all（推荐）

如果你喜欢使用async/await语法，可以这样写：

async function loadAllImages() {
    try {
        const images = await Promise.all(imageUrls.map(url => loadImage(url)));
        console.log('所有图片已加载');
        images.forEach(img => {
            document.body.appendChild(img); // 将图片添加到文档中
        });
    } catch (error) {
        console.error('图片加载失败:', error);
    }
}
 
loadAllImages(); // 调用函数开始加载所有图片

这些方法中，使用Promise.all结合数组的map函数是处理多个异步操作（如图片加载）的推荐方式，因为它简洁且易于理解。使用async/await可以使异步代码看起来更接近同步代码，从而更容易阅读和维护。