Event for when file has loaded

Question

The code below runs on a page:

(function() {
  function asyncLoad() {
    var urls = ["https://something.com/script.js"];
    for (var i = 0; i < urls.length; i++) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = urls[i];
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
  }
  window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>

I need an event listener that fires when this file is available in the DOM.

I need to utilize variables from this script.

I need to know when https://something.com/script.js has been loaded and if it is not I would like a backup to fire. This can happen if the file hasn't loaded within a designated period of time.

Alternatively I could use an event for when a variable is available from the script.js file.

score 1 · Answer 1 · answered Jul 12 '12 at 02:29

1

If in your script.js has a function for example: function a() then you can catch when it available like this

var checkScript = function(){
   if (typeof a  === "function"){
      //fire event
   }else{
      setTimeout(checkScript, 1000);
   }
}
checkScript ();

answered Jul 12 '12 at 02:29

James

13,571
6
61
83

Similar http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded http://stackoverflow.com/questions/3955770/dynamically-include-javascript-and-wait – James Jul 12 '12 at 02:36

score 1 · Accepted Answer · answered Jul 12 '12 at 02:38

Script elements support the load event, so you should set the listener on the script element before inserting it in the DOM, e.g.

  s.src = urls[i];

  s.onload = asyncLoad; // add load listener

  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);

If you want to know if it arrived successfuly or not, use XMLHttpRequest to get the content, then assign it to the script element's text property. That way you can know if the script was retreived, set a timeout in case of failure and take corrective action and not lock the browser in the meantime.

Event for when file has loaded

2 Answers2