multiple onload() functions for initialization purposes

jmrker · 03-12-2013, 06:54 PM

Concept question ahead ... RESOLVED

If I create an anonymous function that contains an "onload()" to activate,
will a second anonymous function with a different "onload()" command execute?

Normally I would initialize using one "onload()" function near the end of the <body> tags
Does this rule still apply about having only ONE "onload()" function per program
or does it change if setting-up multiple anonymous functions?

And, if only one "onload()" function is allowed per program,
where is it placed to activate/initialize multiple anonymous functions?

An example of three anonymous function needs (each has its own initialization sequence) would be:
1. 1st function to control menu display.
2. 2nd function to control gallery display.
3. 3rd function to control calendar date picker

Each currently has its own "onload()" initialization sequence.
Would I call them as is, in order of need or remove the "onload()" sections to be placed in one common section?

felgall · 03-12-2013, 07:07 PM

If you put the JavaScript at the bottom of the page then you probably will not need the onloads at all. If you do need both then you'll need to add them as listeners as event handlers overwrite one another.

The only situation I have found where onload is actually needed is to test if all the images in the page loaded successfully, for anything else simply run the script at the bottom of the page without waiting for anything else to load.

Old Pedant · 03-12-2013, 07:59 PM

Yeah, I use var imageN = new Image(); imageN.src="..."; imageN.onload=countLoads; to count whether all images are lazy-loaded so I can then start an animation using them, but other than that...

Surely you aren't talking about window.onload(), are you? As Felgall says, if your code is just before the </body> then there's surely no reason to use that.

rnd me · 03-12-2013, 09:32 PM

there is only one onload property; last one to set it before it fires "wins".

use setTimeout or document.addEventListener("load", function(){...}); instead

you can also do something like

Code:

var oldLoad=window.onload;
window.onload=function(){
  oldLoad();
  ...
}

jmrker · 03-13-2013, 03:51 AM

Thank you all.

Because there were two separate anonymous functions,
each with their own "onload()" function I thought it was required as written.

Solution:
I put both anonymous functions just before the end </body> tag
and removed the internal "onload()" commands and left the code they controlled alone.

I'll post the demo code if anyone is interested as to what I did.

Old Pedant · 03-13-2013, 04:11 AM

The onload would have been required if the anonymous functions were, for example, in the <head>. But then, of course, you would have needed to use something other than just onload if there were two.

Fun, isn't it?

jmrker · 03-13-2013, 04:33 AM

Quote:

Originally Posted by Old Pedant

The onload would have been required if the anonymous functions were, for example, in the <head>. But then, of course, you would have needed to use something other than just onload if there were two.

Fun, isn't it?

On occasion.

BTW: Is there a way to mark the thread as resolved? I cannot find a button for this.