Javascript event hierarchy in prototype structure

Question

is there any event that needs to be handled between dom: loaded and loaded using the prototype javascript framework?
I used a preloader using a prototype that looks like this:

Event.observe(window,"load",preload); function preload(){ if($('wrapper')) $('wrapper').setStyle({"display":"block"}); if($('loading')) setTimeout('$("loading").fade({duration: 5.0});',4000); } 

then I have another handler that uses to correct the height of the column:

 Event.observe(window,"load",function(){ var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130; if(parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height'))) $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height'))+bottomExtraOffset+'px'}); else $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height'))+bottomExtraOffset+'px'}); });//observe 

It works very well in any browser, but IE! It seems that IE does not add the second handler to the list of onload handlers, so when the first tries to get the height of any of the columns, it returns 0 coz, it still displays as none.

is there any other event besides load and dom: is loaded to be processed and exited from this !?

Answer 1

There is no such AFAIK event, and even the dom: event is loaded by Prototype developers and this is not the default event in JS. You might want to use a helper to delay the execution of the second handler, so the first one will be executed first:

 function foo(){ var bottomExtraOffset = (Prototype.Browser.IE) ? 100 : 130; if (parseInt($$('.col1')[0].getStyle('height')) > parseInt($$('.col2')[0].getStyle('height'))) { $('wrapper').setStyle({'height' : parseInt($$('.col1')[0].getStyle('height')) + bottomExtraOffset + 'px'}); } else { $('wrapper').setStyle({'height' : parseInt($$('.col2')[0].getStyle('height')) + bottomExtraOffset + 'px'}); } } function bar() { // One msec delay. setTimeout(foo, 1); } Event.observe(window, "load", bar); // or window.observe("load",bar); 

In addition, you can check if the user agent is somehow infernal, like IE, and then use this method and your otherwise specified one.

Answer 2

Can you just call the second function after the preload () is complete?

Or, if you do not want to directly call it after preload (), you can do something like setting a flag, and then set a timeout in the section function to wait for the first to complete.

If order is important, you need to establish a connection between the functions.