La precarica delle immagini è un ottimo modo per migliorare la user experience. Quando le immagini sono precaricate nel browser, il visitatore può navigare ovunque nel nostro sito e disporre di tempi di caricamento più veloci. Ciò è particolarmente utile per le gallerie di foto e altri siti con immagini pesanti in cui si desidera visualizzarle il più rapidamente e, s’è possibile, senza problemi.
Il precaricamento immagini aiuta sicuramente gli utenti senza banda larga ad avere una migliore esperienza quando visualizza il contenuto. In questo articolo, esploreremo quattro tecniche differenti di precarico per migliorare le prestazioni e l’usabilità del nostro sito.
#preload-01 { background: url(https://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(https://domain.tld/image-02.png) no-repeat -9999px -9999px; } #preload-03 { background: url(https://domain.tld/image-03.png) no-repeat -9999px -9999px; }
In questo metodo, tuttavia, c’è spazio per un miglioramento. Le immagini che sono state precaricate con questo metodo verranno caricate con altri contenuti della pagina , aumentando così il tempo complessivo di caricamento della pagina. Per risolvere questo problema, possiamo usare un po’ di JavaScript per ritardare la precarica fino a quando la pagina abbia terminato di caricare i suoi contenuti. Questo è possibile mediante l’applicazione della proprietà CSS
background
utilizzando addLoadEvent()
:function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(https://domain.tld/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(https://domain.tld/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(https://domain.tld/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);
Poi, nella seconda parte dello script, si usa la funzione
addLoadEvent()
per ritardare l’esecuzione della nostra funzione preloader()
fino a quando la pagina sia completamente caricata.Cosa succede quando JavaScript non è disponibile sul browser dell’utente? Molto semplicemente, le immagini non saranno precaricate e si caricheranno normalmente quando saranno chiamate nella pagina web.
JavaScript Metodo #1
<script type="text/javascript"> <!--//--><![CDATA[//><!-- var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i] } } preload( "http://domain.tld/gallery/image-001.jpg", "http://domain.tld/gallery/image-002.jpg", "http://domain.tld/gallery/image-003.jpg" ) //--><!]]> </script>
<script type="text/javascript"> <!--//--><![CDATA[//><!-- if (document.images) { img1 = new Image(); img2 = new Image(); img3 = new Image(); img1.src = "http://domain.tld/path/to/image-001.gif"; img2.src = "http://domain.tld/path/to/image-002.gif"; img3.src = "http://domain.tld/path/to/image-003.gif"; } //--><!]]> </script>
img1
=
new
Image();
, così come una dichiarazione del sorgente, img3.src
=
"../path/to/image-003.gif";
. Replicando il modello, è possibile precaricare le immagini a nostro piacimento.Possiamo, anche qui, migliorare questo metodo per ritardare la precarica fino a quando la pagina viene caricata. Per fare questo, dobbiamo semplicemente avvolgere lo script in una funzione e usare
addLoadEvent()
per farlo funzionare:function preloader() { if (document.images) { var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); img1.src = "http://domain.tld/path/to/image-001.gif"; img2.src = "http://domain.tld/path/to/image-002.gif"; img3.src = "http://domain.tld/path/to/image-003.gif"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);
window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
preload.js
, preload.css
, e preload.png
. È impostato un timeout di 1000ms
per evitare che lo script da appendere causi problemi con la normale funzionalità della pagina.Per non lasciarci sfuggire niente, diamo un’occhiata a come questa sessione di precarica sarebbe sata scritta in JavaScript:
window.onload = function() { setTimeout(function() { // reference to <head> var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = "http://domain.tld/preload.css"; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = "http://domain.tld/preload.js"; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
each()
, che esegue un ciclo attraverso ogni elemento dell’oggetto jQuery. La bellezza del metodo each()
è che si crea un ambito separato per ogni iterazione del ciclo, che ci permette di lavorarci dentro senza interferenze.Questo piccolo codice precarica tutte le immagini passate come argomento alla funzione in notazione Json: in pratica un array di elementi separate dalla visgola e racchiuse tra parentesi quadre.
function preload(arrayOfImages) { $(arrayOfImages).each(function(){ $('<img />')[0].src = this; // Alternativamente si può usare: // (new Image()).src = this; }); } // Uso: preload([ 'img/imgPippo.jpg', 'img/imgPluto.jpg', 'img/imgPlato.jpg' ]);
$.fn.preload = function() { this.each(function(){ $('<img />')[0].src = this; }); } // Uso: $(['img1.jpg','img2.jpg','img3.jpg']).preload();

JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…[/content_box] [content_box]
Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…[/content_box] [content_box]

Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …[/content_box] [content_box]
Plugins ⊚
Da un bel po’ di tempo Google Analytics ha aperto la strada per la raccolta gratuita di statistiche del traffico del proprio sito web. Sono sicuro che molti di voi abbiano installato il codice di Google sui vostri siti e a…[/content_box] [content_box]
JQuery ⊚
In questo articolo ci concentreremo sui nuovi metodi nella versione 1.6 della libreria jQuery JavaScript, così come i cambiamenti ai metodi già esistenti. Le informazioni fornite sono solo un riassunto veloce, raccomando u…[/content_box]
Ancora nessun commento