mejor forma de script dinámico cargando

Question

Necesito cargar algunos archivos js dinámicamente y secuencialmente (es decir, el segundo script se carga después de completar la carga del primero, tercero después del segundo y así sucesivamente).

Pregunta: ¿cómo detectar cuándo se ha cargado un script? He tenido problemas con el evento de carga: no se dispara en IE8. Después de leer this, traté de suscribirse a onreadystatechange y escribió código muy feo para cargar un 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); 
    }; 

puede sugerir una solución navegadores mejor sin esos trucos?

UPD: Gracias por responder. ¿Qué debo hacer si también necesito cargar jquery.js (por ejemplo, el cliente tiene una versión anterior) :)?

Answer 1

Creo que lo que necesita es jQuery.getScript

La función toma una URL y un método de éxito con el que se puede cargar de carga encadenada de secuencias de comandos y por lo tanto en forma secuencial:

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

Answer 2

RequireJS:

... es un archivo JavaScript y un cargador de módulos. Está optimizado para uso en el navegador, pero se puede usar en otros entornos de JavaScript, como Rhino y Node. El uso de un gestor de scripts modular como RequireJS mejorará la velocidad y la calidad de su código.

Dice que es IE 6+, Firefox2 2+, Safari 3.2+, Chrome 3+ y compatible con Opera 10+.

Answer 3

Aquí está mi fragmento para cargar varias secuencias de comandos usando 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(); 
    } 
}; 

Uso:

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

En Chrome, podemos utilizar onload y onerror para reemplazar onreadystatechange.