logo

Move Over onLoad. onDomReady Is Here.

Are you still using the onLoad event to trigger JavaScript actions in your web pages? If so, you really should consider using the much more up-to-date and trendy onDomReady event?

The trouble with onLoad, as I'm sure you're all aware, is that it doesn't exactly trigger when you'd expect it to. It only fires once the whole page has loaded. If it's a page with a lot of images and your connection is slow then it could be a long time coming. If your page relies on JavaScript to work then there could well be a spell of time whereby the user is interacting with the page and it hasn't yet been initialised.

Not only is onLoad not reliable, but it's also a usability nightmare. Something I've talked about before and am reminded of every time I visit Screwfix.com/. The onload event focuses the cursor on the search box. This well-meaning design decision is a usability curse for mousephobic surfers like me. As a regular user of the site I was driven to email them about it (got ignored) and then write myself a Greasemonkey script to blur() the search box once loaded.

More often that not you want the "onload" JavaScript to fire as soon as it's safe to do so — when the HTML document is complete and not necessarily when all the images have loaded. That's why they invented the much more developer-friendly onDomReady event, which triggers once the browser has interpreted the page and rendered it.

There's native support in browsers like Opera and Firefox, but not in IE or Safari. However, people have written custom functions to cater for all browsers. More tomorrow on how to start using it and a demo db etc.

Comments

  1. Here's a good little demo of the DomReady Vs OnLoad with the MooTools library : {Link}

    • avatar
    • Jake Howlett
    • Mon 4 Jun 2007 08:53 AM

    Thanks Declan. I was going to mention mootools tomorrow, as there's a bug in its ondomready function. If you use SSL in IE that is. I spent HOURS working that one out!

    • avatar
    • Brian Miller
    • Mon 4 Jun 2007 09:28 AM

    The best-in-class ready-event abstraction is jQuery's $.ready() method. Also, YUI gives you three different flavors for maximum flexibility: onDOMReady(), onAvailable(), and onContentReady(). I tend to shy away from those in most cases, though.

  2. Ext.onReady is a good one as well... includes a scope parameter so you can override what "this" refers to when the function you're passing is executed.

  3. Jake, I believe that problem was fixed in Mootools v1.1

    I also wrote a standalone one called FastInit:

    {Link}

  4. Here's a DOMContentLoaded event that I added to Dean Edwards' fabulous addEvent.

    {Link}

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 4 Jun 2007

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content