Cargador de imágenes

En la entrada anterior comentaba como hacer una barra de progreso y no hay nada mejor que un caso práctico para que se pueda entender mejor.
Ver la página en blanco mientras se carga, suele ser algo que no nos gusta nada, y, depende de la persona, anima a dar repetidas veces al botón de refrescar. En el caso de una precarga de imágenes ocurre lo mismo, por lo que nos gustaría mostrar al visitante que estamos cargando las imágenes y que debe esperar un poco hasta que finalice.

Mostrar resto >>

<< Ocultar resto
El procedimiento es sencillo, necesitaremos la barra de progreso y crearnos un atributo nuevo en las imagenes que vamos a precargar.
Tiene que haber una pequeña modificación en la función que se encarga de realizar el progreso, porque en este caso y no como en el simulador, obtenemos un tanto porciento de progreso que puede saltar de mucho en mucho. Por lo que tendremos que rellenar la barra de progreso en el cuadrado actual y en los anteriores:

    function progreso(n) {         if (n>0 && n<=100) {             // Calculo en que decena se encuentra             var valor = parseInt(n/10);             if (valor != 0) {                 // Cambio el cuadrado de la decena                 // correspondiente y las anteriores                 // de vacio a lleno                 for (var i=1; i<=valor; i++) {                     document.getElementById("pos"+i).className                         = "lleno";                 }             }             // Cambio el porcentaje             document.getElementById("texto").innerHTML                 = "Cargando datos ...<BR>"+n+"%";         }     }

A la hora de crearnos las imágenes tenemos que añadirle un atributo (precarga="si") para poder distinguir las imágenes que cuentan en la precarga y las que no tienen que ver en ella.

<img src="[url]" precarga="si">

Solo nos falta crear un método que recupere todos los elementos IMG del documento, comprobar si son los que nos interesan (precarga="si") y mirar si se han contemplado (atributo complete). También tendremos que llevar la cuenta de cuantas imágenes hay en total y cuantas están ya completas para poder saber el porcentaje.

    function compruebaCarga() {         // Recuperamos todas las imágenes         var imgs = document.getElementsByTagName("IMG");                  var cont=0;         var comp=0;         // Recorremos todas las imagenes y         // comprobamos si es para la precarga         for (var i=0; i<imgs.length; i++) {             if (imgs[i].getAttribute("precarga") == "si") {                 cont++;                 if (imgs[i].complete) {                     comp++;                 }             }         }         progreso(parseInt(100*comp/cont));         if (cont != comp) {             setTimeout("compruebaCarga()", 10);         }     }

Finalmente será necesario incluir el siguiente script para que se llame al método de comprobación de la carga de imágenes.

    <script>         compruebaCarga(0);     </script>

Puede verse un ejemplo en el siguiente ARCHIVO