A DOM Ready Extension for Prototype

Tuesday, July 11th, 2006 @ 11:50 am | filed under: Event Scripting, Prototype

Holy cow this is awesome.

via ajaxian: original post

Dean, John, Matthias and a load of other people were working on a really robust solution to the DOM Ready problem. In case you haven’t seen Dean’s post, they did it and it is good shit. If you want to read more of an explanation head over to Dean’s site.

I’ve been waiting for, but in a very idle way, not doing much about, a really solid solution to this for a long time. It just so happens to be extremely useful for a certain Rails plugin I’m working on with Luke Redpath so as soon as it was written I knew I needed to extend Prototype to use this new technique.

So, here’s an extension to Prototype that allows you to attach one or more functions that will be executed as soon as the DOM is ready to work with. This will not wait for images or other assets to load like window.onload does.

Here’s the script: domready.js

To use it simply add a script tag after your prototype.js script tag or append the code to the bottom of prototype.js.

Then, to execute a function when the DOM is ready:

Event.onDOMReady(function() { //stuff here! });

You can call the function repeated times to add more functions to be triggered if you need to.

13 Responses to “A DOM Ready Extension for Prototype”

  1. Travis Beck Says:

    the vivabit page is MIA, so i have mirrored the script on my site, since it took me a few hours to find it.

  2. Len Says:

    Do you have any plans to contribute this to Prototype?

  3. Aaron N. Says:

    this post is dated June of ’06. Prototype and other libraries already have their methods of doing this.

  4. Len Says:

    If you know what that method is for Prototype, please inform me. I have been looking through the documentation and have not found it.

  5. Aaron N. Says:

    How odd. It’s not part of Prototype. Well, here’s the original code:

    [js]/* — DOM READY http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype — */
    try {
    Object.extend(Event, {
    _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
    if (this._timer) clearInterval(this._timer);
    this._readyCallbacks.each(function(f) { f() });
    this._readyCallbacks = null;
    onDOMReady : function(f) {
    if (!this._readyCallbacks) {
    var domReady = this._domReady.bind(this);
    if (document.addEventListener) document.addEventListener(“DOMContentLoaded”, domReady, false);
    [email protected]_on @*/
    [email protected] (@_win32)

  6. Justin Says:

    Is this still a recommended way to do this? I’m not really a javascript expert, but what I’m looking for is a way to dump a preloader on the page while the whole DOM is loading and after it’s loaded and all the onload javascript is executed the preloader goes away and the rest of the content appears.

    Is that the type of thing this is for?

  7. Aaron N. Says:

    Note that this post is a year old, but yes, this is the recommended way to attached your page-load events. For what you want, you would have your preloader there by default and, when your javascript is ready, hide it (with javascript) on domready. Note that most javascript frameworks (we use Mootools) have this functionality already built into them now, so you don’t need this stand-alone script if you’re using Prototype, YUI, Dojo, jQuery, Mootools, etc.

  8. Moritz Says:

    Just a short question regarding onDomReady: Is window.addEvent(‘domready’, function(){ … the right way to check if the DOM has been rebuild after adding new elements to the page through an ajax call?

  9. Francisco Hernandez Says:

    heres an updated version that works with ie6+https


  10. Aaron N. Says:

    @Moritz, your syntax is correct FOR MOOTOOLS only. If you pass a function to domready and the page is already loaded, your function will execute immediately.

    @Francisco, there are numerous versions of domready floating around out there. Most frameworks have a solution for this already, and if you aren’t using one, you really, really should.

  11. Eric Nguyen Says:

    There’s a more current discussion of options here, guys:


    I’ve had trouble in IE with the code inlined, above.

  12. Al Says:

    For anyone who’s come here recently, prototype after 1.6 now contains similar code – it can be called by document.observe(‘dom:loaded’, function(){…});

  13. zaenal Says:

    A shortcut for version 1.6++, just call “document.loaded” (boolean).

    if (document.loaded===true) alert(“DOM is ready”);
    else alert(“DOMReady is not ready”);