jQuery Lazy Load Xt ritarda il caricamento dello immagini e poi, quando entrano nello spazio visibile della finestra del browser, le visualizza con un effetto personalizzabile.

Malgrado Lazyloadxt sia molto semplice da usare dispone di un set completo di funzionalità come, ad esempio: il supporto di video, iframe, audio e altro ancora.

Lazy Load Xt è rilasciata con licenza MIT.

Visualizza la demo completa.

Usare jQuery Lazy Load Xt

Scaricare una copia di jQuery e di Lazy Load Xt e includerli alla fine del proprio documento, subito prima della chiusura dell’elemento body.

<!DOCTYPE HTML>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title>jQuery - jQuery lazyloadxt  | Sintesi-Design.it</title>
</head>
<body>
<h1>jQuery lazyloadxt</h1>
<p>Caricare le immagini quando serve. </p>
<p>Scorrere la pagina e attendere il caricamento delle immagini. </p>
</div>
    <h2>Lorem ipsum ...</h2>
    <img src="test.jpg" data-src="http://lorempixel.com//800/600/nature" width="300" height="200">
    <p>Cras orci nibh ... </p>
    <p>Lorem ipsum ...</p>
    <img src="test.jpg" data-src="http://lorempixel.com//400/300/nature" width="300" height="200">
    <p>Lorem ipsum ...</p>

    <script src="js/jquery-1.10.2.min.js"></script>     
    <script src="js/jquery.lazyloadxt.js"></script>
</body>
</html>

Inserire negli elementi img l’attributo data-src, seguito dal percorso del file, che attiverà il plugin. 

<img src="test.jpg" data-src="http://lorempixel.com//400/300/nature" width="300" height="200">

È opportuno indicare l’altezza e la larghezza dell’immagine con gli attributi height e width in modo che il browser lasci lo spazio necessario per ciascuna immagine. 

Inoltre, si può usare l’attributo src con un segnaposto qualsiasi per rendere rendere il documento valido dal punto di vista sintattico. 

Quando l’immagine entra nell’area di visualizzazione della finestra, Lazy Load Xt imposta l’attributo src dell’immagine con il percorso presente nell’attributo data-src.

Il risultato dell’esempio precedente può essere visualizzato nella demo.

Si può applicare il plugin solo a determinate immagini presenti nel documento, ma in tal caso è necessario selezionarle con jQuery.

<script>
  $(function () {
    $('.gallery ul li img').lazyLoadXT();
  });
</script>

In questo caso solo le immagini presenti all’interno della lista saranno visualizzate ritardandone il caricamento. Visualizza la demo.

Usare uno spinner

Durante la fase di caricamento si può visualizzare uno spinner. Creare una regola css come la seguente.

.lazy {
    background: #eee url('images/loading.gif') no-repeat 50% 50%;
}

Associare la classe lazy al gestore evento oninit che  si verifica al caricamento iniziale della pagina.

<script>
  $.extend($.lazyLoadXT, {
     oninit: { addClass: 'lazy' },
     onload: { removeClass: 'lazy' }
  });
</script>

Come si può constatare nella demo, quando l’immagine viene caricata si verifica l’evento onload e la classe lazy viene rimossa.

Utilizzare un effetto dissolvenza

Con il meccanismo visto nell’esempio precedente si può realizzare un efficace dissolvenza in entrata. Creare le seguenti classi css.

.lazy {
    opacity: 0;
}
.loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
}

L’effetto vero e proprio viene realizzato mediante i fogli di stile css e, perciò, può essere personalizzato come si desidera. Lazy Load Xt si occuperà, come nell’esempio precedente, di associare le due classi quando si verificano i due eventi:

  • init, la classe lazy, che nasconde l’elemento impostando la sua opacità a zero
  • load, la classe loaded, che visualizza l’immagine riportando a 1 la sua opacità
<script>
 $.extend($.lazyLoadXT, {
    oninit: { addClass: 'lazy' },
    onload: { addClass: 'loaded', removeClass: 'lazy' }
 });
</script>

Il risultato finale può essere visualizzato nella demo.

Molte altre informazioni sulle opzioni del plugin e le relative demo possono essere recuperate dal sito ufficiale di Lazy Load Xt.