Estoy tratando de cargar una imagen para un juego de lienzo HTML. Y quiero que se carguen antes de iniciar el juego. Así que creé una función para cargarlos sincrónicamente antes de que comience mi juego. Pero el problema es,
si la imagen no existe, todavía dispara "Image.onload()" .
Quiero devolver un objeto con "error=true" si la imagen no existe. Pero no podía encontrar una manera.
Aquí está la función que escribí:
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)si observa la consola, verá que "onload" se activa, no "onerror".
onload y onerror deben establecerse en una función, en su lugar, está llamando a una función y asignándoles el retorno.
image.onload = e => resolve({ name, src, image, error: false }) image.onerror = e => resolve({ name, src, image: null, error: true })