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.