I don\’t really like using the \’domready\’ event. The idea of adding another event to the window object just bugs me. So here\’s the alternative. In short, an array is created, functions you want to run are added to the array, and when the page reaches the bottom the functions in the array are run.
The Code
I create my namespaced object literal which includes an array to keep all the functions I want to run. This would be at the top in the <head>.
if(!GTC_CORE){
var GTC_CORE = {\'init\': []};
}
GTC_CORE.init; //returns an empty array
At the bottom of the page, right before the <body> tag, I have the code to run all the functions that are in the GTC_CORE.init array. Here I will be using MooTools Array.each() method.
if(GTC_CORE.init.length){
GTC_CORE.init.each(function(func){
func();
});
}
Adding Functions to the Array
If you have \’domready\’ blocks in the content between the <body> tags, it\’s a simple change. I\’ll give you the before and after.
//Before
window.addEvent(\'domready\', function(){
//Load this stuff here
});
//After
GTC_CORE.init.push(function(){
//Load this stuff here
});
Simple as pie and one less event to add. Keep in mind that \’domready\’ is used to make sure that the DOM elements were all loaded. If you need something to happen on \’load\’, then that\’s a different story. The \’load\’ event makes sure that even the images are done loading, where the \’domready\’ event does not.
I have a similar pattern that I use (I have an extension for Hash called Hash.run that executes all the methods in a Hash, see: http://www.clientcide.com/docs/Native/Hash.Extras#Hash:run).
But I wanted to point out two things to consider.
First, every time you add a domready event to the window, you’re not adding another event to the window in some way that is an expense. Really you’re doing exactly what you’ve shown above – adding a function to an array of functions that need to be executed when the dom is ready. Calling addEvent on window just pushes the event into an array of methods to call when the event fires. There’s no real expense to adding the event, and there’s no saving of cycles by using your array pattern here.
The second thing to consider is that the domready event keeps track of whether or not the dom has *already* loaded. Meaning that if you add a domready event and domready has already fired, your method will be executed immediately. This is really useful for code that has to occur after domready but you’re not sure when it’s being run (I use this a lot in plugins I release).
I agree that keeping all your “initialize” code in one place is really useful (though it’s not always practical). Using your array method here might feel more tidy than a bunch of domready statements, but it amounts to the same thing – a collection of methods that all run when the document is ready for them.
@Aaron
Thanks for letting me know more information about the ‘domready’ event. I will keep in mind as I move forward with javascript.