Web e code script visite 12

Velocizzare il sito con jQuery Lazy Load Plugin

3 min

Abbiamo parlato a più riprese degli strumenti per analizzare la velocità del sito e migliorarne le prestazioni. Oggi voglio presentarvi un plugin jQuery davvero funzionale per tale scopo, parlo di Lazy Load.

Le pagine del sito con tempi di caricamento lunghi

Se gestite un sito ed in particolare un blog con una grande quantità di immagini potreste riscontrare un inconveniente per quanto riguarda i tempi di caricamento lunghi delle pagine. Ciò provoca due problemi principali: i tempi di attesa per l’utente, il funzionamento di eventuali plugin che abbiamo applicato (come ad esempio un effetto lightbox sulle immagini, che sarà attivo solo quando la pagina sarà carica). Ciò potrebbe avere come conseguenza un allontanamento del navigatore dal sito.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

La gestione del caricamento delle immagini

Lazy Load è un’ottima soluzione perchè carica le immagini solo quando necessario e non “a priori”, applicando, in maniera opzionale, un effetto fade in (dissolvenza in entrata) all’ingresso delle immagini. Potete vedere in questo stesso articolo l’applicazione del plugin, uno strumento davvero utilissimo per diminuire i tempi di caricamento della pagina.

Se siete poco pratici di codici ed utilizzate WordPress per i vostri siti vi consiglio di scaricare il plugin gratuito.

Da parte mia, consiglio sempre di cercare di evitare i plugin quando possibile. In questo caso se ne può fare facilmente a meno, per cui seguite questo semplice tutorial di pochi step. Non pubblico una demo esterna di esempio perchè potete vedere questo effetto applicato a questa stessa pagina. Vi basterà scrollarla verso il basso e vedere cosa accade alle immagini.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

Come utilizzare jQuery Lazy Load: analizziamo il codice

Sarò conciso, senza tergiversare, per essere il più chiaro possibile.

Scarichiamo l’ultima versione di jQuery, carichiamola all’interno di una cartella che chiameremo js e richiamiamola nell’header:

<script type="text/javascript" 
src="percorso-assoluto-del-vostro-sito/js/jquery-1.9.0.min.js">
</script>

A questo punto creiamo un’immagine gif di 1px per 1px. Il colore che daremo all’immagine sarà il colore “di sfondo” all’immagine prima che essa si carichi. Per comodità potete scaricarla cliccando qui. Creiamo quindi una cartella images in cui caricare il file, che utilizzeremo in seguito.

Dopodichè dobbiamo scaricare il plugin vero e proprio e richiamarlo nel footer, prima della chiusura del body, aggiungendo subito dopo la funzione che permetterà il risultato desiderato. La riga opzionale dell’effetto permette all’immagine di caricarsi attraverso il fad in, ossia la dissolvenza.

<script src="percorso-assoluto-del-vostro-sito/js/jquery.lazyload.js"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({
              effect : "fadeIn"
          });
      });
</script>

Ora siete pronti, dovete solo modificare il campo src image quando caricate delle immagini sul sito, che non sarà più:

<img src="indirizzo-assoluto-dell'immagine" width="500" height="500" />

ma diventerà:

<img src="percorso-assoluto-del-vostro-sito/images/grey.gif" 
data-original="indirizzo-assoluto-dell'immagine" width="500" height="500" />

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Icone di Natale 2017 in png e vettoriali da scaricare gratis

3 minSi avvicina la festività del Natale e noi creativi dobbiamo farci subito…

webdesign

Web e code script

What colour is it? L’orologio esadecimale

1 minOggi vi segnalo un sito creativo, da veri nerd, per appassionati di…

webdesign

Web e code script

Un calendario per il tuo form con jQuery UI DatePicker

3 min Molto spesso vi sarete imbattuti su siti web con form di…