Wednesday, March 26, 2008

Triggering Events on page load (and right before)

  1. Use prototype.js in your page.

  2. Call the Prototype function Event.observe() for the 'load' event. You can call the Event.observe() function as many times as you want, it will simply append your code each time, so as not to clobber each other when the event is fired. There are two ways you might perform this call. If you have a function you want to run, simply call:

    Event.observe(window, 'load', yourFunctionName);

    If you have a bit of code you want to run, call this instead:

    Event.observe(window, 'load', function() {
    // your bit of code here
    });
Do you want it to run onLoad... or onDOMLoad?

One important thing to realize is that the 'load' event for a page only fires AFTER all images on the page have been loaded. This may take a while, depending on your page design. You may be thinking that you will just run your bit of code when the page first starts loading. The problem with that is the DOM is not completely available yet, so your code will usually fail.

This guy has some javascript code that allows you to basically "observe" the onDOMLoad event, even in browsers that don't really export such an event. If you use his code to attach code to this event, it will run after the DOM is available, but before the "onload" event is fired for the page body.

The downside is it doesn't use prototype.js, so it may actually overlap a bit of that functionality. However, as of Prototype.js 1.6, their site was actually pointing to people to this guy's examples, so presumably that means there is no current expectation that Prototype does or will offer similar functionality.

3 comments:

Tanny O'Haley said...

Thank you for linking to my site for the DOMContentLoaded or DOMReady event. I'm sorry to see the prototype doesn't handle that event as it is very useful. If you don't want Dean's addEvent handler, just copy the code from the DOMContentLoaded event comment (it's about half way down) to the end of the file. When you need to use a DOMReady event, just call the addDOMLoadEvent() with the function you want to run on DOMReady. If DOMReady has already occurred the addDOMLoadEvent() will immediately run the passed function.

Israel said...

So is it safe to run Google Maps API when the DOM is ready, or shall we wait for the window or body to load? Thanks

Everton J. Carpes said...

for native Prototype 1.6.0 support, look at this:

http://www.prototypejs.org/api/document/observe