Da poco pubblicata, Lazy Loader è una piccola libreria JavaScript, realizzata da Bob Matsuoka e rilasciata sotto licenza GPL che presenta una semplice ma funzionale implementazione della DLL.
La libreria, che garantisce una notevole cross-browser compatibiliy, permette la definizione di callback che vengono scatenate una volta terminato il download e presenta una cache locale per evitare doppi ed inutili download di script. Lazy Loader si appoggia alla ormai diffusissima libreria Prototype e presenta un unico metodo statico che permette di scaricare appunto uno script remoto e di eventualmente assegnare una funzione di callback.
Analizziamo il breve sorgente per capire meglio il funzionamento:
var LazyLoader = {};
LazyLoader.timer = {};
LazyLoader.scripts = [];
LazyLoader.load = function(url, callback)
{
try
{
if ($A(LazyLoader.scripts).indexOf(url) == -1)
{
LazyLoader.scripts.push(url);
var script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
$$("head")[0].appendChild(script);
if (callback)
{
script.onreadystatechange = function ()
{
if (script.readyState == 'loaded' || script.readyState == 'complete')
{
callback();
}
}
script.onload = function ()
{
callback();
return;
}
// caso particolare per Opera e Safari
if ((Prototype.Browser.WebKit && !navigator.userAgent.match(/Version\/3/)) || Prototype.Browser.Opera)
{
LazyLoader.timer[url] = setInterval(function()
{
if (/loaded|complete/.test(document.readyState))
{
clearInterval(LazyLoader.timer[url]);
callback();
}
}, 10);
}
}
}
else
{
if (callback) { callback(); }
}
}
catch (e) { alert(e); }
}
Dopo aver inizializzato il namespace (Lazy Loader) vengono definite due variabili statiche per la gestione della cache (LazyLoader.scripts) e per la gestione dei timer (LazyLoader.timer) necessari per garantire il corretto comportamento anche su Opera che non presenta API native JavaScript complete come i concorrenti Firefox, Internet Explorer e Safari.
Successivamente viene definito il metodo statico principale della piccola libreria. Una volta verificato che lo script non sia gia stato caricato in precedenza (e quindi non esiste all'interno della cache locale) viene modificato il DOM della pagina creando un nuovo elemento <script> con i due attributi src e type e viene appeso all'elemento <head> proprio come descritto in precedenza nella definizione dell'approccio DLL.
Inoltre, se esiste il parametro callback, esso viene assegnato all'onload dello script. Questa assegnazione presenta un meccanismo proprio per ciascun browser.
In Internet Explorer è necessario utilizzare l'evento onreadystatechange controllando ogni volta lo stato (che deve essere 'complete' o 'loaded'), mentre in Firefox e Safari su utilizza l'evento onload.
Nel caso di Opera (si noti lo sniffing sullo userAgent della richiesta tramite RegEx) è necessario creare un timeout che ogni 10 millisecondi controlla se davvero lo script è stato scaricato e in caso positivo esegue la callback definita dall'utente (e ovviamente interrompe il timeout con clearInterval()).
Se lo script è già stato scaricato in precedenza, l'eventuale funzione callback viene invocata istantaneamente. Per ultimo viene stampata a video l'eventuale eccezione lanciata dalle richieste precedenti.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |