A DOM Ready Extension for 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.
March 15th, 2007 at 3:15 pm
the vivabit page is MIA, so i have mirrored the script on my site, since it took me a few hours to find it.
http://smoothoperatah.com/files/onDOMReady.js
April 26th, 2007 at 6:54 am
Do you have any plans to contribute this to Prototype?
http://www.prototypejs.org/contribute
April 26th, 2007 at 8:53 am
this post is dated June of ‘06. Prototype and other libraries already have their methods of doing this.
April 27th, 2007 at 7:57 am
If you know what that method is for Prototype, please inform me. I have been looking through the documentation and have not found it.
April 27th, 2007 at 9:14 am
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);
/*@cc_on @*/
/*@if (@_win32)
document.write(”
July 6th, 2007 at 6:31 am
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?
July 6th, 2007 at 8:20 am
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.
July 11th, 2007 at 1:50 pm
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?
July 13th, 2007 at 3:45 pm
heres an updated version that works with ie6+https
http://snipplr.com/view/2337/ondomready/
July 16th, 2007 at 8:01 am
@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.
July 16th, 2007 at 3:03 pm
There’s a more current discussion of options here, guys:
http://www.codestore.net/store.nsf/unid/BLOG-20070604
I’ve had trouble in IE with the code inlined, above.
April 3rd, 2008 at 9:00 pm
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(){…});
August 29th, 2008 at 2:46 pm
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”);