Mootools domready vs window.onload

  • Avinash
  • 4
  • Sep 22, 2010
  • Web Development

We are using window.onload or body onload=”” to start performing some events as the page is loaded.

Like

window.onload=myFunction;
window.onload=myFunction;

There are some down side to this method. First of all we have to wait for images. Next, what if you had a few scripts and had some code tied to window.onload? They would overwrite each other.

Mootools have created a solution for this. Mootools comes with a custom event that fire as soon as the DOM is ready. It is called DomReady.

Window.addEvent(‘domready’, function(){ myFunction(); });
Window.addEvent(‘domready’, function(){
  myFunction();
});

Above code will fire the myFunction as soon as all of the HTML DOM is loaded but before images, other windows and other images are loaded at all.

Benefits of DomReady Event:

  • Allow you to work with page as sooner than onload.
  • Allow you to use the same event with many scripts.
  • No waiting for images.

DomReady Syntax

/* MooTools DomReady. Two Styles. 1. Call the function directly. 2. The function is inside of anonomos function. */ window.addEvent('domready', myFunction); //Or. window.addEvent('domready', function(){ myFunction(); }); function myFunction() { alert("The DOM is ready."); }
/*
MooTools DomReady.
Two Styles.
1. Call the function directly.
2. The function is inside of anonomos function.
*/

window.addEvent('domready', myFunction);
//Or.
window.addEvent('domready', function(){
   myFunction();
});

function myFunction()
{
  alert("The DOM is ready.");
}

Related Posts

Written by Avinash

Avinash Zala currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

View all posts by: