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