¿Cómo puedo hacer que un evento de Javascript se active después de que se carguen todas las imágenes en una matriz?

Estoy trabajando en un juego HTML5 Canvas, y el nivel necesita precargar algunas imágenes (y, eventualmente, también otros datos, como archivos de audio). Estoy planeando tener todas estas imágenes almacenadas en una matriz o en un objeto contenedor. Lo que debo hacer es encontrar una manera de esperar hasta que todas estas imágenes se descarguen por completo antes de continuar en el juego.

Esto NO sucede cuando se abre la página. Esto sucede en lo profundo del script en ejecución y las imágenes se cargan dinámicamente. La idea es mostrar un mensaje de "cargando", y una vez que todo esté hecho, comience el nivel como se esperaba.

Tengo acceso a jQuery, pero preferiría seguir con el código Javascript directo. ¿La función window.onload funciona aquí ya que en realidad no sucede cuando se carga la página? Si no existe tal evento, ¿hay alguna forma de atravesar los objetos de imagen y verificar si ya están cargados?

preguntado el 12 de junio de 12 a las 20:06

2 Respuestas

Puede tener un contador para verificar en el evento de carga si todas las imágenes se cargan (o fallaron).
Algo como

var loadedImages = 0;
var failedImages = 0;
var imageCount = amount of images
function loaded(){
    loadedImages++;
    if (loadedImages == imageCount){
        //all images successfully loaded
    }
    else if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
function failed(){
    failedImages++;
    if ((loadedImages+failedImages) == imageCount){
        //all images completed
    }
}
var images = array();
for (var i = 0; i < imageCount; i++){
    images[i].onload = loaded;
    images[i].onerror = failed;
    images[i].src = the image source
}

Respondido el 13 de enero de 14 a las 09:01

yo empezaria por esto https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be y conviértalo para que funcione para múltiples imágenes. Sin embargo, usa jquery.

contestado el 23 de mayo de 17 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.