JS: La función de devolución de llamada se llama cuando la imagen se carga, pero en realidad, image.complete muestra que no está cargada.

Hola a todos y Feliz Año Nuevo,

Estoy trabajando en un proyecto de juego pequeño utilizando JavaScript y me encontré con 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 la imagen se carga, un escuchador de eventos llama a una función que establece la imagen en “true” en mi mapa.
Pero a veces, mi mapa está lleno de “true” sin ninguna imagen en mi pantalla y cuando imprimo “img.complete” es falso, lo que significa que no está cargado.
Todo esto está en una clase de mi archivo y “this.chargementImg” es el mapa.

Aquí está la función de carga de imágenes:

cargarImagen(chemin) { let img = new Image(); this.chargementImg.set(chemin, false); img.addEventListener("load", this.actualizarCargaImagen(chemin)); img.src = chemin; return img; }

Y la función de devolución de llamada:

actualizarCargaImagen(chemin) { this.chargementImg.set(chemin, true); }

Salida de la consola cuando no se muestran las imágenes:

Mapa(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: false

No entiendo por qué no funciona.
Gracias por sus respuestas.

davy.ai

July 31, 2023 at 11:16 pm

Posible solución para la carga incorrecta de imágenes usando Javascript y addEventListener

Hola,

Según el código que has compartido, parece que tu enfoque debería funcionar, pero puede haber un problema con la forma en que estás manejando el evento del escuchador.

Primero, debes eliminar los paréntesis y argumentos del método del escuchador de eventos cuando lo agregas al objeto img. Entonces tu código debería verse así:

img.addEventListener("load", this.updateChargementImg);

De lo contrario, el método updateChargementImg se llamará inmediatamente después de agregar el escuchador de eventos, en lugar de cuando se carga la imagen.

Luego, puedes modificar tu método updateChargementImg para verificar si todas las imágenes se han cargado y mostrarlas solo si es así. Aquí tienes un ejemplo:

updateChargementImg() {
  let todasLasImagenesCargadas = true;
  for (let loaded of this.chargementImg.values()) {
    if (!loaded) {
      todasLasImagenesCargadas = false;
      break;
    }
  }
  if (todasLasImagenesCargadas) {
    // Mostrar las imágenes
  }
}

Este método verifica si todos los valores en el mapa chargementImg son verdaderos y, si lo son, muestra las imágenes. De lo contrario, espera a que se carguen más imágenes.

Espero que esto te ayude a resolver tu problema. ¡Feliz codificación!

Answer

davy.ai

July 31, 2023 at 11:16 pm
Posible solución para la carga incorrecta de imágenes usando Javascript y addEventListener

Hola,

Según el código que has compartido, parece que tu enfoque debería funcionar, pero puede haber un problema con la forma en que estás manejando el evento del escuchador.

Primero, debes eliminar los paréntesis y argumentos del método del escuchador de eventos cuando lo agregas al objeto img. Entonces tu código debería verse así:
```
img.addEventListener("load", this.updateChargementImg);
```
De lo contrario, el método updateChargementImg se llamará inmediatamente después de agregar el escuchador de eventos, en lugar de cuando se carga la imagen.

Luego, puedes modificar tu método updateChargementImg para verificar si todas las imágenes se han cargado y mostrarlas solo si es así. Aquí tienes un ejemplo:
```
updateChargementImg() {
  let todasLasImagenesCargadas = true;
  for (let loaded of this.chargementImg.values()) {
    if (!loaded) {
      todasLasImagenesCargadas = false;
      break;
    }
  }
  if (todasLasImagenesCargadas) {
    // Mostrar las imágenes
  }
}
```
Este método verifica si todos los valores en el mapa chargementImg son verdaderos y, si lo son, muestra las imágenes. De lo contrario, espera a que se carguen más imágenes.

Espero que esto te ayude a resolver tu problema. ¡Feliz codificación!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

JS: La función de devolución de llamada se llama cuando la imagen se carga, pero en realidad, image.complete muestra que no está cargada.

Answer

davy.ai

Posible solución para la carga incorrecta de imágenes usando Javascript y addEventListener