Esempio di preload delle immagini, con JQuery

Pubblicato il 25/06/2008 da Matteo Moro in design, esempi, javascript, jquery, strumenti, usabilità

Puzzle
Molte applicazioni web fanno uso di immagini che vanno visualizzate o nascoste a seconda delle azioni compiute dagli utenti. In caso di connessioni lente, diventa frustrante usare questo genere di applicazioni, perchè le immagini necessarie ad ottenere gli effetti desiderati ci mettono un bel po’ di tempo ad essere caricate, con il risultato che l’applicazione diventa difficile da usare e poco intuitiva.

Da molti anni esistono tecniche di preload delle immagini, che non fanno altro che caricare tutte le immagini presenti in una pagina prima di renderla disponibile alla visualizzazione. Questo semplice esempio, realizzato da FilamentGroup con l’ausilio di jQuery, non fa altro che scorrere la pagina corrente alla ricerca dei fogli di stile esterni, per poi analizzarli e caricare tutte le immagini utilizzate: in questo modo, nel momento in cui è richiesto un effetto grafico, le immagini necessarie saranno già nella cache dell’utente e la visualizzazione risulterà molto più reattiva.

[source:JScript]
jQuery.preloadCssImages = function(){
var allImgs = [];
var k = 0;
var sheets = document.styleSheets;

for(var i = 0; i<sheets .length; i++){
var cssPile = ”;
var csshref = (sheets[i].href) ? sheets[i].href : ‘window.location.href’;
var baseURLarr = csshref.split(‘/’);
baseURLarr.pop();
var baseURL = baseURLarr.join(‘/’);
if(baseURL!=”") baseURL+=’/';
if(document.styleSheets[i].cssRules){
var thisSheetRules = document.styleSheets[i].cssRules;
for(var j = 0; j0 && imgUrls != ”){
var arr = jQuery.makeArray(imgUrls);
jQuery(arr).each(function(){
allImgs[k] = new Image();
allImgs[k].src = (this[0] == ‘/’ || this.match(‘http://’)) ? this : baseURL + this;
k++;
});
}
}
return allImgs;
}
[/source]

Approfondimenti:

Commenti

4 commenti per “Esempio di preload delle immagini, con JQuery”

  1. diggita.it il 25/06/2008 08:51

    Esempio di preload delle immagini, con JQuery…

    Da molti anni esistono tecniche di preload delle immagini, che non fanno altro che caricare tutte le immagini presenti in una pagina prima di renderla disponibile alla visualizzazione. Questo semplice esempio, realizzato da FilamentGroup con l’ausili…

  2. Plim.it - Vota questo articolo! il 25/06/2008 08:51

    Esempio di preload delle immagini, con JQuery…

    Da molti anni esistono tecniche di preload delle immagini, che non fanno altro che caricare tutte le immagini presenti in una pagina prima di renderla disponibile alla visualizzazione. Questo semplice esempio, realizzato da FilamentGroup con l’ausili…

  3. notizieflash.com il 25/06/2008 08:52

    Esempio di preload delle immagini, con JQuery…

    Da molti anni esistono tecniche di preload delle immagini, che non fanno altro che caricare tutte le immagini presenti in una pagina prima di renderla disponibile alla visualizzazione. Questo semplice esempio, realizzato da FilamentGroup con l’ausili…

  4. walter il 25/09/2008 15:51

    ho provato ma il tutto non funziona…credo che manchi un ; dopo il loop for

Commenta il post