JavaScript to detect when external javascripts are loading

Question

Is there a way (event listener or otherwise) to detect when a particular external javascript is about to load / is loading / has finished loading?

In otherwords, do

Answer 1

I wrote a script for those who wants to call a function after all external files (dynamically added) are loaded. It goes like this:

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>

Hope it helps!

Answer 2

<script onload> will fire when a script is finished loading.

You will not be able to do something like:

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

This is pure conjecture and speculation; I have not tried it and there's probably better ways to write it, but this will not do what you're looking to do. EDIT: The scripts are loaded as the browser sees them, not after the fact. They will be loaded before this occurs.

Answer 3

Since all browsers blocks the "UI thread" when processing <script> tags, you can rely that pre-existing tags are loaded.

If you are loading a script dynamically, you can listen to the load event of the <script> tag.

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 4

If you can use jQuery, try $.getScript(). Docs here.

Answer 5

The following example works in Chrome. It attaches an handler on the onload event of the head tag and then adds an external javascript file. When the file is loaded, the event is captured and an alert appears.

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); 
}