Ci avevo pensato anch'io e ho buttato giù questa piccola libreria:
codice:
$().ready(function() {
$("img.load, img.load32, img.load64, img.load128, img.load256, img.load480, img.load640").one('load', function()
{var nimg=$(this).prop('nimg');
$(this).removeProp('nimg');
$("div.loading").each(function(i)
{if(nimg==$(this).prop('nimg'))
{$(this).fadeOut(900);
$(this).removeProp('nimg');
return false;}
});
}).each(function(i)
{{var elem=jQuery('<div class="loading"></div>');
var size=$(this).attr('class');
size=size.substr(size.search("load")+4,3);
if(size[0]==' ' || size=='')
size='128';
elem.copyCSS($(this),'border');
elem.css({"position":"absolute","background":"#DADADB url(\'/immagini/loading"+size+".gif\') no-repeat","height":$(this).css('height'),
"width":$(this).css('width'),"background-position":"center center","opacity":"1","z-index":"999"});
elem.offset($(this).offset());
$('body').prepend(elem);
$(this).prop('nimg', i);
elem.prop('nimg', i);
}
if(this.complete)
$(this).load();
});
});
Ho messo delle gif animate nella cartella 'immagini' di varie dimensioni chiamate loading32.gif, loading64.gif ecc. e con questo codice mettendo la classe load (è come load128), load32, load64 ecc. a un tag <img> copre l'immagine con quella nella cartella mentre si carica e poi se ne va con un fadeOut. A tua scelta puoi usare queste righe
codice:
if(this.complete)
$(this).load();
oppure eliminarle: servono a rendere il caricamento più rapido se l'immagine era già stata caricata precedentemente, ma se l'immagine è molto grande in alcuni casi sparisce il caricamento e mostra l'immagine mentre si disegna riga per riga.
Spero di esserti stato di aiuto.