Il plugin jQuery imagesLoaded si rivela fondamentale per implementare layout dinamici.
imagesLoaded ci permette infatti di eseguire il nostro codice quando tutte le immagini contenute in un dato elemento sono state caricate. Un'immagine non completamente caricata non dispone di due fondamentali informazioni, ossia la sua larghezza e la sua altezza.
Senza questi due dati non possiamo effettuare dei calcoli qualora ad esempio volessimo implementare una griglia:
$( "#grid" ).imagesLoaded(function() {
//...
});
Il limite di questo plugin è che non tiene in considerazione le immagini di sfondo. Tuttavia esiste una soluzione:
$( "#wrapper .parallax" ).each(function() {
var bg = $( this ).css( "background-image" );
var src = bg.replace( /url\(/g, "" ).replace( /\)"/g, "" );
// Creo le immagini e le nascondo
$( "<img/>" ).attr( "src", src ).appendTo( "#wrapper" ).hide();
});
$( "#wrapper" ).imagesLoaded(function() {
//...
});