JavaScript da rilevare quando i javascript esterni vengono caricati

Question

C'è un modo (listener di eventi o altro) per rilevare quando un particolare javascript esterno sta per caricare/sta caricando/ha terminato il caricamento?

In altre parole, il browser attiva un evento quando sta per caricare, sta caricando e/o ha finito di caricare un particolare script esterno?

Per i miei scopi non è sufficiente controllare semplicemente per vedere se esiste un oggetto conosciuto o qualcosa del genere. Invece, ho bisogno di qualcosa che rilevi che un file JS sia caricato/caricato indipendentemente dal contenuto del file JS.

Answer 1

Il seguente esempio funziona in Chrome. Allega un gestore all'evento onload del tag head e quindi aggiunge un file javascript esterno. Quando il file viene caricato, l'evento viene catturato e viene visualizzato un avviso.

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

Poiché tutti i browser bloccano il "thread UI" durante l'elaborazione dei tag <script>, è possibile fare affidamento sui tag preesistenti.

Se si sta caricando uno script in modo dinamico, è possibile ascoltare l'evento di caricamento del tag <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

Se è possibile utilizzare jQuery, provare $.getScript(). Doc. here.

Answer 4

<script onload> sparerà quando uno script è terminato il caricamento.

È Non sarà in grado di fare qualcosa di simile:

<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> 

Si tratta di una congettura pura e la speculazione; Non l'ho provato e probabilmente ci sono modi migliori per scriverlo, ma questo non farà lo fare quello che stai cercando di fare. EDIT: gli script vengono caricati come li vede il browser, non dopo il fatto. Saranno caricati prima che ciò accada.

Answer 5

Ho scritto uno script per coloro che desiderano chiamare una funzione dopo che tutti i file esterni (aggiunti dinamicamente) vengono caricati. Va in questo modo:

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>

Speranza che aiuta!