JavaScript para detectar cuando se cargan javascripts externos

Question

¿Hay alguna manera (detector de eventos o de otro tipo) de detectar cuándo está por cargar/está cargando/ha terminado de cargarse un javascript externo en particular?

En otras palabras, ¿el navegador activa un evento cuando está por cargar, está cargando y/o ha terminado de cargar un script externo en particular?

Para mis propósitos, no es suficiente simplemente comprobar si existe un objeto conocido o algo así. En cambio, necesito algo que detecte que un archivo JS se está cargando/cargando independientemente del contenido del archivo JS.

Answer 1

El siguiente ejemplo funciona en Chrome. Se adjunta un controlador en el evento de carga de la etiqueta principal y luego agrega un archivo javascript externo. Cuando se carga el archivo, se captura el evento y aparece una alerta.

http://jsfiddle.net/francisfortier/uv9Fh/

window.onload = function() { 
    var head = document.getElementsByTagName("head")[0]; 
    var script = document.createElement("script"); 

    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", "http://code.jquery.com/jquery-1.7.1.min.js"); 

    head.addEventListener("load", function(event) { 
     if (event.target.nodeName === "SCRIPT") 
     { 
      alert("Script loaded: " + event.target.getAttribute("src")); 
     } 
    }, true); 

    head.appendChild(script); 
} 

Answer 2

Dado que todos los navegadores bloquean el "subproceso de la interfaz de usuario" al procesar las etiquetas <script>, puede confiar en que se carguen etiquetas preexistentes.

Si está cargando una secuencia de comandos dinámicamente, puede escuchar el evento de carga de la etiqueta <script>.

function loadScript(src, callback) { 
    var script = document.createElement("script"); 
    script.setAttribute("src", src); 
    script.addEventListener("load", callback); 
    document.getElementsByTagName("script")[0].insertBefore(script); 
}; 

loadScript("http://code.jquery.com/jquery-1.7.1.min.js", function(){ 
    alert("loading is done"); 
}); 

Answer 3

Si puede utilizar jQuery, tratar $.getScript(). Docs here.

Answer 4

<script onload> se disparará cuando el guión está terminado de cargar.

Usted no será capaz de hacer algo como:

<script src="/foo.js"></script> 
<script src="/bar.js"></script> 
<script> 
function alertonload(src){ 
    console.log(src+' is loaded'); 
} 
scripts = document.getElementsByTagName('script'); 
for(var i=0; i<scripts.length; i++){ 
    scripts[i].onload = function(){ alertonload(scripts[i].src); }; 
} 
</script> 

Esto es pura conjetura y la especulación; No lo he probado y probablemente haya mejores formas de escribirlo, pero este no hará lo que estás buscando hacer. EDITAR: los scripts se cargan como el navegador los ve, no después del hecho. Se cargarán antes de que esto ocurra.

Answer 5

Escribí un script para aquellos que quieren llamar a una función después de cargar todos los archivos externos (añadidos dinámicamente). Dice así:

var file = []; 
 
var loaded = []; 
 
var head = document.getElementsByTagName('head')[0]; 
 

 
var fileOnLoad = 
 
// Pass the arrays to your function 
 
(function(file, loaded){ return function(){ 
 
    
 
    loaded.push(true); 
 
    
 
    // Print the number of files loaded 
 
    document.getElementById("demo").innerHTML += 
 
    "<br>"+loaded.length+" files loaded"; 
 
    
 
    if(file.length == loaded.length){ 
 
    
 
    alert("All files are loaded!"); 
 
    } 
 
}})(file, loaded); 
 

 
//////////////////////////////////////////////// 
 
////          //// 
 
//// Add the external files dynamically //// 
 
////          //// 
 
//////////////////////////////////////////////// 
 

 
file[0] = document.createElement('script'); 
 
file[0].src = 
 
"https://maps.googleapis.com/maps/api/js?v=3.exp"; 
 
file[0].onload = fileOnLoad; 
 
head.appendChild(file[0]); 
 

 
file[1] = document.createElement('script'); 
 
file[1].src = 
 
"http://code.jquery.com/jquery-latest.js"; 
 
file[1].onload = fileOnLoad; 
 
head.appendChild(file[1]); 
 

 
file[2] = document.createElement('script'); 
 
file[2].src = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"; 
 
file[2].onload = fileOnLoad; 
 
head.appendChild(file[2]); 
 

 
file[3] = document.createElement('link'); 
 
file[3].rel = "stylesheet"; 
 
file[3].href = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"; 
 
file[3].onload = fileOnLoad; 
 
head.appendChild(file[3]); 
 

 
file[4] = document.createElement('link'); 
 
file[4].rel = "stylesheet"; 
 
file[4].href = 
 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"; 
 
file[4].onload = fileOnLoad; 
 
head.appendChild(file[4]);

<div id="demo">0 file loaded</div>

Espero que ayude!