JavaScript "Image.onload" 即使找不到图像也会触发

Question

我正在尝试为 HTML canvas 游戏加载一些图像。我希望它们在我开始游戏之前加载。所以我创建了一个函数来在我的游戏开始之前同步加载它们。但问题是，
如果图像不存在，它仍然会触发“Image.onload()”。
如果图像不存在，我想 return 一个带有“error=true”的对象。但是找不到方法。

下面是我写的函数：

function loadImages(images) {
    return {
        list: images,
        loaded: {},
        failed: {},
        _load(src, name){
            return new Promise((resolve)=>{
                let image = new Image()
                image.onload = resolve({ name, src, image, error: false })
                image.onerror = resolve({ name, src, image: null, error: true })
                image.src = src
            })
        }
    }
}

let myLoader = loadImages("some image list")
let image = await myLoader._load("https://someUrl.com/img.png", "imageName")

console.log(image)

如果您查看控制台，您会看到触发的是“onload”而不是“onerror”。

Answer 1

onload 和 onerror 应该设置为一个函数，而不是调用一个函数并将 return 分配给它们。

image.onload = e => resolve({ name, src, image, error: false })
image.onerror = e => resolve({ name, src, image: null, error: true })

JavaScript "Image.onload" 即使找不到图像也会触发

JavaScript "Image.onload" fires even if the image is not found

javascript

image

promise