Comprobar carga de un recurso

Problema:

Comprobar que la imagen o recurso se ha cargado

El explorador recorre el código de la pa´gina y va mostrándola en la pantalla.

Los recursos más lentos como imágenes o videos tardan más en cargarse que el resto de la página.

Cuando vamos a usar uno e estos recursos ¿como nos aseguramos que está cargado?

Solución

Utillizar los eventos load del recurso

La solución nos la da el modelo de objetos del explorador con el evento load de los objetos imagen.

Cuando una imagen se ha terminado de cargar lanza el evento load, es decir, avisa al explorador de ese suceso.

Solo tenemos que asignar una función a ese evento. Con HTML onload o con Javascript addEventListener

Ejemplo

Por ejemplo, supongamos que nuestra página tiene 10 imágenes y queremos saber cuando se han cargado todas ellas.

Est función va contando el número de imágenes que van lanzando el evento load. El valor de este contador lo guardamos en una variable global.

var numImagenes = 0;

function contarImags( )

{

numImagenes++;

if (numImagenes == 10)

     alert("Todas las imágenes han sido cargadas")

}

En cada imagen dentro ya del cuerpo de la página vinculamos el evento a esta función:

<img src="imagen1.jpg" onload="contarImags( )">

Cada vez que una imagen termina de cargarse ejecuta la función vincImgOnload( ) que simplemente incrementa el contador de imágenes para comprobar a continuación si están todas cargadas, en caso afirmativo este ejemplo muestra una ventana alert.