DOM Ready solution!!!

[puertoagp]

Hi everybody,

As i worked on an application i needed a way to execute certain scripts when the dom was ready.

I consider myself a beginner programmer in javascript, so this is what i came up with:

function isDOMready() {
try {
window.scrollTo(0,0);
//functionHere();
alert('DOM ready');
} catch(e) {
setTimeout('isDOMready();', 0);
return;
}
}

This function came to mind after reviewing Dean Edwards http://dean.edwards.name/weblog/2005/09/busted/,John Resig Safari solution and Diego Perini http://javascript.nwbox.com/IEContentLoaded/ approach for IE...


Raimundo Araujo - www.codigopixel.net

[Stooshie]

Good thinking. However, one drawback may be that if the page took a while to load you may get a nested function error. If you know the page isn't that long and your server delivers pages fairly quickly, there shouldn't be too much of a problem though.

[puertoagp]

Thanks for your comment

You might be right, i ran different tests on a no more than 200 tags web page with some images, when DOM is ready i insert some content to a div while the the images are still loading, it worked perfectly in IE5.5+, Safari 3.x.x+ and Firefox 3.x.x+ and Google Chrome.

so what would be a proper way test this function to get a nested function error?

How about if I tweek the function to use a flag and maybe use a different timeout so that it works better and then test it on a 1000 tag webpage with some heavy images?

[Stooshie]

Perhaps you could put some server side script on the page (php, asp?) with a very large loop that outputs html to the html stream.

However I suspect, although possible, a nested loop problem would be rare.

You could, perhaps, make the timeout, say, 10ms just to be sure.

[puertoagp]

Thanks for your comment

You might be right, i ran different tests on a no more than 200 tags web page with some images, when DOM is ready i insert some content to a div while the the images are still loading, it worked perfectly in IE5.5+, Safari 3.x.x+ and Firefox 3.x.x+ and Google Chrome.

so what would be a proper way test this function to get a nested function error?

How about if I tweek the function to use a flag and maybe use a different timeout so that it works better and then test it on a 1000 tag webpage with some heavy images?


Hi, if anybody read this:

I just realized that the window.scrollTo(0,0); did nothing for the function at all!

It was another funtion that i used in my test to insert content to the body that was returning the error 'TypeError: document.getElementsByTagName("body")[0] is undefined'
or 'TypeError: Undefined value';

So in reality the function should look like this:

isDOMready();
function isDOMready() {
var cuerpo = document.getElementsByTagName('body')[0];
var span = document.createElement('span');
try {
cuerpo.appendChild(span);
cuerpo.removeChild(span);
} catch(e) {
setTimeout('isDOMready();', 0);
return;
}
alert('DOM is ready!');
//funcions here!
return;
}

I any of you have a chance to test it, please post your results here!