Differences Between onLoad & onReady


Once you learn to handle Web page events, you can create websites that interact with site visitors and enhance their user experience. Some events, such as onLoad, occur even if you don't write code to handle them. It is also possible to handle a similar event named onReady if you add an additional script library to your HTML code. OnLoad and onReady are almost identical, but they do have one important difference.

Web Pages and Events

  • When a Web browser creates a Web page, it constructs the page using a hierarchical object tree called the Document Object Model. Objects in the DOM exist in a structured parent-child relationship model. The body object, for example, may have child objects such as anchors and headings. Those objects might have child text nodes that reference them. The objects and relationships that exist when a page loads depend on how you code your Web page. Events, which occur during a page's life cycle, cause various actions to occur in response to a trigger action. Clicking a button, for instance, triggers an onClick event.

Page Loading

  • Web pages appear in browsers without the use of JavaScript. However, if you wish to create interactive websites, you must add a scripting language such as JavaScript to your HTML code. JavaScript functions can access DOM objects, retrieve their values and even change their properties. One mistake that beginning programmers often make is attempting to modify a DOM object before it exists on the page. Browsers go through a specific set of steps when building a Web page, and you cannot manipulate objects until the browser makes them available.

OnLoad and onReady

  • Requesting a Web page causes a Web server to send your browser the data needed to construct your page. An onLoad event occurs after a Web browser loads all DOM objects required to create the page. OnLoad events are part of the official DOM. When creating Web applications, you also have the option to use third-party JavaScript libraries such as EXT JS. This library has an onReady function that that also runs when you load a Web page that uses the library.


  • Unless you add Ext JS to a Web page, you must use the standard onLoad event to perform a task after your page loads. The onReady function runs before the onLoad event occurs and does not wait for the browser to download all data needed to construct the page. You might wish to use onReady to create the illusion that your page loads faster; site visitors will see activity on the page as it loads. However, if a function needs to manipulate a page object, use an onLoad event handler to call that function. This insures that the object exists before your code accesses it.

Related Searches


Promoted By Zergnet


Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!