About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Web Development

DOMLoaded Script

So between John Resig over at jQuery, Dean Edwards, and Matthias Miller, there's been a lot of work being done to get a better implementation of a DOM document loaded script working. And they've got it working for just about every major modern browser.

This is very cool. What does this mean? It means that you don't have to rely on window.onload anymore. What's the problem with window.onload? You have to wait until every major binary loads and everything, but what you really want is just to fire off your scripts when the Document Object Model (DOM) is complete. Then, you can add and remove, hide and show anything that still might be coming down the pipe at will. Much more efficient. Documents are small, graphics are big. See?

The code has been added to the always excellent jQuery library, and Dean has posted the full script, but there were a few things which I'd like to see, so I refactored it.

In the end it was really just the ability to drop the script on a page, have it isolated in a namespace/Object Literal style, and fire off any script you want to rather than the original init() script.

This still needs testing in every major browser, but IE and Firefox (I don't have Safari except at work) seem to be fine. Opera 8.x uses window.onload and the latest Opera 9 Beta supports the same interface Mozilla supports for DOMContentLoaded.

I'd ask that folks test this and let me know. There might be some mistakes in there somewhere.

The demo page is here, and you can download the script here.

Thanks of course go to Dean and John and Matthias, I did very little here but refactor it.

Update: The script has been updated.

Update 2: Fixed some issues with the way the script was implemented for IE, noted in some comments, either here or on one of the other posts about this script.

Jun 17, 01:03 PM in Web Development (filed under JavaScript)

1. Matthias Miller    Jun 21, 12:03 PM    #

   Have you considered adding support for multiple “init” functions? It seems that would increase the usefulness of the script.

2. rob    Jun 22, 03:10 AM    #

   Matthias, thanks for the feedback.

   Something along the lines of being able to make the call multiple times? Or, being able to pass the method multiple functions?

   It actually came up in the comments on Dean’s blog post.

   Thinking about it more though, I typically set up a single function which does everything. To keep the Object light weight, I tend to shy away from feature packing it.

   Counter point though is, why bother with the script if you’re going to pass a custom name, but you’re always setting up a single function anyway? Then you could always name your function “init” and be done (unless you’ve got another function called “init” doing something else).

   I can think of a couple ways to do it. Multiple calls or multiple parameters, or both.

   Let me know what you think.

3. rob    Jun 22, 03:16 AM    #

   Matthias,

   Thinking about it more, it seems like multiple calls to DomLoaded.load() makes more sense.

   It seems much more likely to me that an author might want to have them spread out in different .js calls and such.

   You would be at the mercy of what order they’re packed in there however.

   ...although, you could argue it encourages bad habits of disorganized code.

   Hmmmm…

4. Jesse Skinner    Jun 22, 06:49 AM    #

   I made a plain old function version that allows you to register multiple DOM Loaded functions. You can just call addDOMLoadEvent(function) as many times as you want:

   http://www.thefutureoftheweb.com/blog/2006/6/adddomloadevent

5. rob    Jun 22, 11:21 AM    #

   Jesse,

   That’s very cool. Seems people are very much into the strength of being able to call it many times, with the other versions of this popping up anywhere. Perhaps I’ll make the update to mine.

   I like your script though, very much.

   Seems it's really catching on, with other versions out there too.

6. Matthias Miller    Jun 22, 03:59 PM    #

   rob, I would definitely lean toward allowing multiple calls instead of multiple parameters, as others have done. Imagine that you’ve got half a dozen different widgets on a page that need to be loaded. Each of those widgets can unobtrusively initialize themselves.

7. rob    Jun 27, 10:31 PM    #

   Matthias, yeah, I’ve come to the same conclusion. Been out of town, hope to get on that soon … I’ll post again when I do.

8. Tanny O'Haley    Jun 28, 07:01 AM    #

   I’m one of the “others”, with the exception that I use addEvent() to add DOMContentLoaded events. You can see it at DOMContentLoaded for Browsers, Part II

9. rob    Jul 3, 02:08 PM    #

   Folks, the script has been updated...

10. Brautkleider    Jan 18, 06:40 PM    #

    I just tested the script in safari, no problem ;-)

11. lanetas    Feb 7, 01:13 PM    #

    that’s is ver cool, but no work whit iframe in IE example
    

12. rob    Feb 8, 10:47 AM    #

    @lanetas, I’m sorry, your example code just got jumbled in Textpattern’s comment system (it’s not so good with code) and I didn’t follow. if you have an example online that you can link to, please feel free, I’d like to see it.

13. Hochzeitsvideo -dler    Feb 22, 05:27 PM    #

    My admin tested your script and all was ok, so thanks!

14. online shopping    Aug 23, 03:34 PM    #

    I have checked out all of your scripts and I have to say that I’m sincerely impressed with everybody. I tried my hand at making something similar to what Tanny has got going but I couldn’t get everything to go just the way I wanted…that’s what I get for still being a trainee in this world and not a veteran. How would you all recommend I go about solving for what should be simple scripting errors but turn into things that I can never find? I swear, it’s like looking for a needle in a hay stack sometimes with these scripting errors and I just need some minor assistance to keep myself on the right track and off the path to giving up. Rob, why did you decide to create your own version instead of just telling Mathias and those guys what was missing from theirs? I have come to the conclusion that sometimes that just seems so much easier.

15. unique corporate gift    Oct 5, 06:41 AM    #

    We’ve been having problems with window.onload. I was really happy when I saw your post. I’ve forwarded this to my boss. So far he hasn’t responded yet but I’m sure he’s happy with it.

16. Johan Sundström    Jan 29, 05:09 PM    #

    Your for loop clobbers window.i; you want to turn that into a “var i = 0;” lead-in.

Commenting is closed for this article.