regresar a la lección

Cargando imágenes con una un función de retorno (`callback`)

importancia: 4

Normalmente, las imágenes son cargadas cuando son creadas. Entonces, cuando nosotros agregamos <img> a la página el usuario no ve la imágen inmediatamente. El navegador necesita cargarlo primero.

Para mostrar una imágen inmediatamente, podemos crearlo “en avance”, como esto:

let img = document.createElement('img');
img.src = 'my.jpg';

El navegador comienza a cargar la imágen y lo guarda en el cache. Después cuando la misma imágen aparece en el documento (no importa cómo) la muestra inmediatamente.

Crear una función preloadImages(sources, callback) que cargue todas las imágenes desde una lista de fuentes (sources) y, cuando esten listas, ejecutar la función de retorno (callback).

Por ejemplo: esto puede mostrar una alerta (alert) después de que la imágen sea cargada:

function loaded() {
  alert("Imágenes cargadas")
}

preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);

En caso de un error, la función debería seguir asumiendo que la imágen ha sido “cargada”.

En otras palabras, la función de retorno (callback) es ejecutada cuando todas las imágenes han sido cargadas o no.

La función es útil, por ejemplo, cuando planeamos mostrar una galería con muchas imágenes desplazables y estar seguros que todas las imágenes estan cargadas.

En el documento fuente puedes encontrar enlaces para probar imágenes y también el codigo para verificar si han sido cargadas o no. Debería devolver 300.

Abrir un entorno controlado para la tarea.

El algoritmo:

  1. Crear una img para cada fuente.
  2. Agregar los eventos onload/onerror para cada imágen.
  3. Incrementar el contador cuando el evento onload o el evento onerror se dispare.
  4. Cuando el valor del contador es igual a la cantidad de fuentes, hemos terminado: callback().

Abrir la solución en un entorno controlado.