Jump to content

Dom Loadup Detection?


CSSisyphus
 Share

Recommended Posts

Hello folks.I was interested to know if there is a Javascript method with would allow me to call a function after (and only after) all of the DOM elements on a given page have completely loaded.I have tried the old approach of placing the Jscript block just before the </body> tag. Works well for the most part. However, slower browsers/systems seem to fire the script before all other page elements have been loaded.Any help is appreciated.Thanks!

Link to comment
Share on other sites

I don't believe it's possible that the script is executed before the code that precedes it. Because scripts cannot be run before they are found.

Link to comment
Share on other sites

@Ingolme:This is what I expected, too. However, FF 3+ doesn't seem to agree; and it's giving me grief even on localhost . . .Thanks again.@justsomeguy:Got the script. Trying to figure out the implementation right now!Thank you.
What exactly is your script trying to access?If you try to obtain the width and height of an image even after the markup is parsed, you won't get any values until the image itself has loaded.
Link to comment
Share on other sites

@Ingolme:I'm loading (time sequenced) text into a couple of td elements dynamically via AJAX on loadup. This works out OK with the exception of FF 3+, which seems to have some global memory/CPU usage issues. It gets the time-delayed requests bunged up, and only one td element's (the last called) content gets loaded instead of both. I'm interpreting this as some sort of crossup in the DOM loadup sequence vs. firing of the script event; and I simply want to stay clear of the DOM chaos until all has settled...@justsomeguy:I've dissected the example which you sent me along to. I have one question; and was wondering whether or not you might be able to shed some light (I cannot find contact info for the authors).Consider the following sequence taken from the <head> of this example:

<!-- body background set to green --><script type="text/javascript">//<![CDATA[	var $tt = (new Date).getTime();	function timeElapsed(t) { return ((new Date()).getTime() - t); }	ContentLoaded(window,		function (e) {			document.body.style.backgroundColor = 'green';			window.status =			window.defaultStatus =				' * ' + e.type + ' ' +				' - ' + (e.eventType ? e.eventType : 'native') +				' in ' + timeElapsed($tt) + ' ms.';		}	);//]]></script>

As we can tell from the rest of the example,

document.body.style.backgroundColor = 'green';

is the event which we are seeking to fire after all else has loaded.I've tried

<!-- body background set to green --><script type="text/javascript">//<![CDATA[	ContentLoaded(window, function(p) {document.body.style.backgroundColor = 'green';} );//]]></script>

with equal efficacy.Question: What is the purpose for the omitted code? It seems to me that it's a small gas factory which might've been left behind after some initial mods...Thanks again :)

Link to comment
Share on other sites

@justsomeguy:Got it.Now, if you don't mind my asking, is there a story that goes with " The Old Man From Scene 24"?Having lived in the Valley for 30+ years, I know it's hotter in Phoenix today; but here in Seattle we're roasting in the 3-digit zone as well (thought I was getting away from this type of abuse)...:)Anyway, thanks again; and have a good day!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...