Effetto Lazyload sulle immagini al caricamento del browser

Oggi prendo spunto da una richiesta di Alex per spiegare come ottenere l’effetto del caricamento delle immagine allo scroll del browser che puoi vedere in esecuzione su WordPress Style.

Plugin o codice?

L’effetto Lazyload usa, tanto per cambiare, le famose librerie jQuery e in particolare l’ottimo plugin di Mika Tuupola. Come al solito ti propongo due vie per arrivare alla stessa soluzione, la prima tramite il plugin per WordPress jQuery Image Lazy Load WP, la seconda inserendo il codice nel file functions.php del tuo tema.

Inclusione codice Lazyload

Come già detto faremo uso delle librerie jQuery quindi richiamale in header.php del tuo tema con la funzione:

[php]<?php wp_enqueue_script(‘jquery’); ?>[/php]

o tramite questa stringa di codice da inserire prima di </head> e importante sempre prima di <?php wp_head(); ?>

[php]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>[/php]

in questo caso le librerie sono richiamate direttamente dalle API di Google. Per maggiori approfondimenti sull’inclusione di jQuery puoi leggere anche Come includere jQuery in WordPress. Ora scarica il plugin per Lazyload dal sito dell’autore (per plugin in questo caso intendo l’estensione per jQuery) Download Lazyload, va benissimo la versione minified, di appena 2,9Kb. Ti consiglio di creare nella cartella del tema una sottocartella apposita per i files javascript per esempio /js. Come al solito richiamiamo la libreria appena scaricata nel nostro header.php in questo modo:

[php]<script src="<?php bloginfo(‘template_url’); ?>/js/jquery.lazyload.mini.js" type="text/javascript"></script>[/php]

adesso apri il file functions.php e aggiungi queste righe di codice:

[php]// Carica immagini allo scroll della pagina.
function kode_lazy_load() {
$placeholdergif = (TEMPLATEPATH . ‘/images/lazy.png’);
echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("#content img").lazyload({
effect:"fadeIn",
placeholder: "$placeholdergif"
});
});
</script>
EOF;
}
add_action(‘wp_head’, ‘kode_lazy_load’, 12); [/php]

come potrai notare viene richiamato anche il file lazy.png, si tratta di un’immagine di 1x1px trasparente,grigia o bianca che andrai a creare ed inserire nella cartella /images del tema.
Altro punto Molto importante è quello di impostare quali immagini del blog si voglia caricare. Nel caso del codice di esempio puoi notare #content img come div, che nel caso del mio blog è la parte dei contenuti esclusa la sidebar. La definizione dei vari div può variare da tema a tema (main,container etc.) quindi ti consiglio di controllare bene questo attributo di fondamentale importanza per un corretto funzionamento.

Alla Prossima!