A volte non sappiamo con certezza se jQuery è già presente sul sito su cui stiamo operando e caricare due volte la stessa libreria può portare a delle spiacevoli conseguenze. Possiamo per questo definire una funzione che carichi jQuery in modo asincrono e verificare al contempo se jQuery è già presente. Vediamo come.
Definiamo la seguente funzione:
function loadScript(src,callback) {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
if(typeof(callback) == 'function') {
script.onload = function() {
if ( ! script.onloadDone ) {
script.onloadDone = true;
callback.apply(this);
}
};
script.onreadystatechange = function() {
if ( ( "loaded" === script.readyState || "complete" === script.readyState ) && ! script.onloadDone ) {
script.onloadDone = true;
callback.apply(this);
}
};
}
script.src= src;
head.appendChild(script);
}
L'evento onload viene usato per i browser diversi da Internet Explorer, mentre onreadystatechange per Explorer. La funzione eseguirà il codice passatole come secondo argomento solo quando jQuery sarà stata caricata.
Ecco la verifica da fare per poter utilizzare questa funzione:
if(!window.jQuery) {
loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',init);
} else {
init();
}
function init() {
$(function() {
alert('jQuery caricato!');
});
}
Le librerie JavaScript appartengono al namespace globale dell'oggetto window, quindi testiamo se jQuery non è presente come proprietà di questo oggetto. In questo caso carichiamo prima jQuery e quindi eseguiamo la funzione di callback. In caso contrario, eseguiamo direttamente il codice.
Potete visionare l'esempio finale in questa pagina.