ansaurus

Question

Ordering of javascript execution (inline and external), IE vs. Firefox

Answer 1

+3 A:

The script loads asynchronously, you can know exactly when the external script has been loaded,using the load (and readystatechange for IE) events, but you should take care of removing the script elements and nullify the handlers after the load is done to avoid known memory leaks.

I would also recommend you to insert your script elements on the head, there is no really a reason (unless you use document.write which I don't think is a good idea nowdays) to add the script elements anywhere inside the body...

I use the following library independent function, inspired by the jQuery's $.getScript method:

loadScript("blah.js", function () {
  addEndingScript(document.getElementById("theparent"));
  // or why not simply scriptDoneRunning(); ???
});

function loadScript(url, callback) {
  var head = document.getElementsByTagName("head")[0],
      script = document.createElement("script"),
      done = false;

  script.src = url;

  // Attach event handlers for all browsers
  script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      callback(); // execute callback function

      // Prevent memory leaks in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

CMS 2009-12-08 21:31:01

That works great, and I dig the functional style ;) Thanks!

ChrisDiRulli 2009-12-08 21:44:02

Answer 2

+2 A:

The reason of such behaviour is the fact that the IE loads scripts asynchronous, when you append the script tag dynamically (check the link MSDN). To wait till the script is loaded you should use "onload" (onreadystatechange) event.

sc.onload = sc.onreadystatechange = function(){};

You can use the loader, which I posted as an solution to the question or write your own.

P.S: Using, setAttribute for src attribute is bad practice when you want to support IE6< browsers, better use direct property, like

sc.src = "http://bla.js";

nemisj 2009-12-08 21:37:47

ansaurus

tags:

views:

answers:

Ordering of javascript execution (inline and external), IE vs. Firefox

related questions