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, does the browser fire an event when it's about to load, is loading, and/or has finished loading a particular external script?

For my purposes it's not enough to simply check to see if a known object exists or anything like that. Instead, I need something that will detect a JS file is loading/loaded regardless of the contents of the JS file.

Answer 1

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

Answer 2

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 3

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 4

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

Answer 5

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