CODEWITHSUNDEEP
javascript
Dan
Dan

Reputation: 3459

JavaScript to detect when external javascripts are loading

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.

Upvotes: 13

Views: 16405

Answers (5)

pmrotule
pmrotule

Reputation: 9692

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!

Upvotes: 1

tkone
tkone

Reputation: 22728

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

Upvotes: 1

u.k
u.k

Reputation: 3091

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

Upvotes: 7

Francis
Francis

Reputation: 3383

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

Upvotes: 19

Julio Santos
Julio Santos

Reputation: 3895

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

Upvotes: 0

Related Questions