Effettuare il Lazy Loading delle immagini con jQuery
Link sponsorizzati
Partiamo dal principio definendo cos’è il Lazy Loading per chi ancora non lo sapesse. Sostanzialmente si tratta di un design pattern che viene utilizzato nella programmazione (soprattutto quella ad oggetti) che ci permette di utilizzare un proprietà, un oggetto, o, generalmente, una risorsa solo nel momento del bisogno. Faccio due esempi stupidi, uno che usa, e uno che non usa il Lazy loading.
public Object ReferencedObject { get; private set; }
public int ReferentAttribute { get; private set; }
public string Attribute1 { get; private set; }
public WithoutLazyLoad(int ReferentAttribute) {
LoadThisObject(ReferentAttribute);
ReferencedObject = new MyObject(ReferentAttribute);
}
}
Questo è un tipico esempio di non utilizzo del pattern di cui sopra. Infatti quando viene istanziato l’oggetto WithoutLazyLoad vengono caricati, oltre alle proprietà dell’oggetto corrente (in questo caso la stringa) anche un oggetto interno che non è detto che serva, anzi, potrebbe anche non essere mai usato.
Link sponsorizzati
{
private Object myObj;
public Object ReferencedObject
{
get
{
if (myObj == null)
{
myObj = new myObject(this.ReferentAttribute);
}
return myObj;
}
}
public int ReferentAttribute { get; private set; }
public string Attribute1 { get; private set; }
public WithLazyLoad(int ReferentAttribute)
{
myObj = null;
LoadThisObject(ReferentAttribute);
}
}
Questo invece è come si utilizza correttamente il pattern. Infatti l’oggetto interno viene istanziato solo una volta quando serve, cioè, quando viene richiamata la proprietà ReferencedObject (il codice copra è C#).
Ora passiamo invece al tema di questo articolo. Cioè il Lazy Loading delle immagini. Praticamente, questa tecnica, ci consente di caricare le immagini di una pagina web solo ed esclusivamente quando servono, in poche parole, quando vengono utilizzate, cioè, viste dall’utente, ovvero quando il monitor le contiene. Consideriamo la pagina di un blog: solitamente tutte le immagini vengono caricate in una botta sola quando si richiama la pagina. La pagina di un blog è relativamente lunga, e, se ci sono molte immagini grandi, ci si mette tanto a caricarla. Con questa tecnica invece si riducono i tempi di caricamento della pagina web e quindi i vostri visitatori, o quelli che girano ancora con il 56k, vi ringrazieranno sicuramente.
Girando su internet ho trovato un plugin molto interessante per jQuery che implementa proprio questa tecnica. Infatti, come potete vedere in questo esempio, scrollando con il mouse le immagini sottostanti vengono caricate solo quando il monitor le mostra. L’utilizzo è veramente banale, bastano due righe di codice:
placeholder : "img/grey.gif"
});
Questo applica l’effetto a tutte le immagini del sito. Il placeholder è una gif 1×1 che viene mostrata quando l’immagine ancora non è stata caricata. Ovviamente possiamo applicare l’effetto solo alle immaigini che vogliamo noi, basta cambiare il selettore. Il plugin potete scaricarlo da questa pagina, nel post linkato anche in precedenza, ci sono altri esempi e modi d’utilizzo del plugin.
Link sponsorizzati
Wow, decisamente utile come cosa
Infatti visitando il blog avevo notato questa caratteristica!