Hola a todos y feliz año nuevo,
Estoy trabajando en un pequeño proyecto de juego usando JavaScript y encontré un problema al cargar imágenes.
Quiero que todas las imágenes se carguen antes de mostrarlas, así que creé un mapa en el que cada imagen está vinculada a false y, cuando se carga la imagen, un detector de eventos llama a una función que configura la imagen como true en mi mapa.
Pero a veces, mi mapa está lleno de true sin ninguna imagen en mi pantalla y cuando img.complete es falso, lo que significa que no está cargado.
Todo aquí está en una clase de mi archivo y this.chargementImg es el mapa.
Aquí está la función de carga de imágenes:
chargerImage(chemin) { let img = new Image(); this.chargementImg.set(chemin, false); img.addEventListener("load", this.updateChargementImg(chemin)); img.src = chemin; return img; }Y la función de devolución de llamada:
updateChargementImg(chemin) { this.chargementImg.set(chemin, true); }Salida de la consola cuando no se muestran imágenes:
Map(3) {'./elements/images/fonds/sol/DarkSpace.png' => true, './elements/images/fonds/mur/Castle2.png' => true, './elements/images/ennemies/Earthspirit.png' => true} img1.complete : false img2.complete : false img3.complete : falseNo entiendo por qué no funciona. Gracias por tus respuestas.
Haga que la load EventListener una función sin nombre. Dentro de eso, coloque updateChargementImg y return img . Entonces no habrá carrera ni asincronismo.
img.addEventListener("load", function(){ this.updateChargementImg(chemin); return img; }); img.src = chemin;