il modo migliore per caricare script dinamici

Question

Ho bisogno di caricare alcuni file js in modo dinamico e sequenziale (vale a dire il secondo script viene caricato dopo il caricamento completo del primo, terzo dopo secondo e così via).

Domanda: come rilevare quando uno script è stato caricato? Ho riscontrato problemi con l'evento onload: non si attiva in IE8. Dopo aver letto this, ho cercato di iscriversi a onreadystatechange e scritto molto brutto codice per il caricamento di uno script:

function loadScript(url, callback) { 
     var isLoaded = false; 
     var script = document.createElement('script'); 

     script.onreadystatechange = function() { 
      if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) { 
       if (callback) callback(); 
      } 
     }; 
     script.setAttribute('type', 'text/javascript'); 
     script.setAttribute('src', url); 
     document.head.appendChild(script); 
    }; 

Potete suggerire una migliore soluzione cross browser senza trucchi del genere?

UPD: Grazie per le risposte. Cosa devo fare se ho bisogno di caricare anche jquery.js (ad esempio, il client ha una vecchia versione) :)?

Answer 1

Penso che quello che vi serve è jQuery.getScript

La funzione prende un URL e un metodo di successo con il quale è possibile il caricamento catena di script e quindi caricarli in sequenza:

jQuery.getScript(url, function() { 
    jQuery.getScript(url2, function() 
    {/*... all 2 scripts finished loading */} 
); 
}); 

Answer 2

RequireJS:

... è un file JavaScript e un caricatore di moduli. È ottimizzato per l'uso in-browser, ma può essere utilizzato in altri ambienti JavaScript, come Rhino e Node. L'uso di un caricatore di script modulare come RequireJS migliorerà la velocità e la qualità del tuo codice.

Dice che è IE 6+, Firefox2 2+, Safari 3.2+, Chrome 3+ e Opera 10+ compatibile.

Answer 3

Ecco il mio snippet per caricare diversi script utilizzando jQuery.getScript();

function getScripts(inserts, callback) 
{ 
    var nextInsert = inserts.shift(); 
    if (nextInsert != undefined) 
    { 
     console.log("calling"+nextInsert); 
    jQuery.getScript(nextInsert, function(){ getScripts(inserts, callback); }) 
      .fail(function(jqxhr, settings, exception){alert("including "+nextInsert+" failed:\n" +exception)}); 
    } 
    else 
    { 
     if (callback != undefined) callback(); 
    } 
}; 

Usage:

var includes = [ 
    "js/script1.js", 
    "js/script2.js", 
    "js/script3.js" 
]; 

getScripts(includes, function(){ /* typically a call to your init method comes here */; }); 

Answer 4

In Chrome, possiamo usare onload e onerror per sostituire onreadystatechange.