Tengo este código para cargar varias imágenes:
const imageURLS = ["lvls/1.png", "assets/tileatlas.png"]; let imageCount = imageURLS.length; let assets = []; function imageLoaded(i){ imageCount--; if(imageCount == 0){ window.TILEATLAS = assets[0]; load(); } } function loadAssets(){ for(let i = 0, len = imageCount; i < len; i++){ let image = new Image(); image.src = imageURLS[i]; assets.push(image); image.onload = imageLoaded(image); } } onload = loadAssets();pero cuando trato de acceder a las imágenes en las funciones de carga (), dice que el ancho y la altura son 0, para mí, lo que indica que las imágenes no terminaron de cargarse, pero ¿deberían hacerlo? estoy estupefacto...
El problema es esta línea:
image.onload = imageLoaded(image); Debido a que tiene el paréntesis, Javascript llama a la función de inmediato y espera que devuelva el resultado que se pasará a onload . Necesita algo como esto:
const imageURLS = ["lvls/1.png", "assets/tileatlas.png"]; let imageCount = imageURLS.length; let assets = []; function imageLoaded(){ var i = this imageCount--; if(imageCount == 0){ window.TILEATLAS = assets[0]; load(); } } function loadAssets(){ for(let i = 0, len = imageCount; i < len; i++){ let image = new Image(); image.src = imageURLS[i]; assets.push(image); image.onload = imageLoaded.bind(image); } } onload = loadAssets(); La función bind establece el valor de this en la función para el argumento. De esta manera, no llamará a la función, sino que la creará.