实现一个函数 loadImage(url)，加载一张图片

推荐答案

function loadImage(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 from ${url}`));
    });
}

本题详细解读

1. 函数功能

loadImage(url) 函数用于异步加载一张图片。它接受一个图片的 URL 作为参数，并返回一个 Promise 对象。当图片加载成功时，Promise 会被 resolve，并返回加载好的图片对象；如果加载失败，Promise 会被 reject，并返回一个错误对象。

2. 实现细节

• 创建 Image 对象：使用 new Image() 创建一个新的图片对象。
• 设置图片源：将传入的 URL 赋值给 img.src，开始加载图片。
• 处理加载成功：通过 img.onload 事件监听器，当图片加载成功时，调用 resolve(img)，将加载好的图片对象传递给 Promise 的 resolve 回调。
• 处理加载失败：通过 img.onerror 事件监听器，当图片加载失败时，调用 reject(new Error(...))，将错误信息传递给 Promise 的 reject 回调。

3. 使用示例

loadImage('https://example.com/image.jpg')
    .then(img => {
        console.log('Image loaded successfully');
        document.body.appendChild(img);
    })
    .catch(error => {
        console.error('Failed to load image:', error);
    });

在这个示例中，loadImage 函数加载一张图片，并在加载成功后将其添加到页面的 body 中。如果加载失败，会在控制台输出错误信息。