Question

Regarding this SO article and this SO article. I looked at these after noticing my web app does not fire in IE8…I don’t care about backward compatibility at the moment but if it’s one line of code why not? Anyways the other issue I was having is the onload event waits for all the content to load…so the user has no controls if he/she is waiting for images to download. This led me to believe that I should just use

<script type='text/javascript'>my_initialize_function()</script>

placed in the html where I want the page to initialize.

and say to bye to

window.onload = initializePage;

or

window.addEventListener('load',initialize_page);

or any similar.

My question is: Is this a valid approach to initializing one’s page?

PS: I’m not using any libraries including JQuery…and obviously I would not try to initialize elements that have not been loaded yet.

Answer 1

No.

jQuery and similar libraries has an interesting approach. They simply capture different events in a crossbrowser manner while making it easier for the developer to use.

Let’s consider the following code:

<script> document.getElementById('a').innerHTML='b'; </script>
<div id="a"></div>

It may or may not work depending on whether the browser runs javascript when it finds it or only after the whole document has been built.

On the other hand, if you used the proper event mechanism but the document has already been built, your code will not be called.

jQuery unites both paradigms to get a seamless and better system. Something like so:

var foo = {

  // holds list of callbacks to call when document starts
  stack: [],

  // document not ready yet
  ready: false,

  // add callback to be called when document is ready
  add: function(callback){
      foo.stack.push(callback);
      if(foo.ready)foo.fire(); // document is ready, call fire
  },

  // fire callbacks (document IS ready)
  fire: function(){
      for(var i=0; i<foo.stack.length; i++)
          foo.stack[i]();
      foo.stack = [];

      foo.ready = true; // document IS ready
  }

};

// bind to browser events
window.onload = foo.fire; // TODO: you should use actual events

// example of use
foo.add(function(){
    alert('Document is ready!');
});