Hoy os traigo un código que os permitirá detectar si todas
las imágenes están cargadas, y en caso afirmativo, hacer algo con ellas.
Para facilitar el trabajo nos valdremos de jQuery que nos hará el trabajo más cómodo.
Lo primero es ocultar todas las imágenes, con un opacity:0 por ejemplo.
img{
opacity:0;
}
Luego, generaremos un script con jQuery que detectará las imágenes que hay en la página, detectará cuando estén cargadas y hará algo cuando estén todas.
A continuación os dejo el script que hace todo el trabajo:
$(document).ready(function(){
var totalImages = $('img').length;
var cont = 0;
$('img').each(function(){
if(this.complete) {
cont++;
if(totalImages == cont){
showImages();
}
}
else{
$(this).load(function(){
cont++;
if(totalImages == cont){
showImages();
}
});
}
});
});
function showImages(){
$('img').css('opacity','1');
}
Contabilizamos el número de imágenes totales de la página y, a continuación, recorremos el listado de imágenes. Por cada imagen que se carga o que ya está cargada en cache sumamos 1 al contador hasta que todas están cargadas, momento en el cual mostramos todas las imágenes con opacity 1.
Este script tiene en cuenta tanto las imágenes que cargamos desde el servidor gracias a .load() como aquellas que el propio navegador ya tiene cacheadas gracias al evento .complete
Espero que os sirva de ayuda.