Javascript Event Hierarchy in Prototype framework

问题

is there any event to be handled between the dom:loaded and load using Prototype javascript framework?
I've implemented a preloader using prototype which is looking 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've an another handler using for column height fixatioan which is:

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's working pretty nice in any browser but IE! It seems that IE is not appending the second handler to the onload handlers list, so when the first one is trying to get height of any of columns it returns 0 coz it's still displayed as none.

is there any other event than load & dom:loaded to be handled and get me outta this!?

回答1:

There's no such event AFAIK, and even the dom:loaded event is implemented by Prototype developers and that's not a default event in JS. You might want to use a helper to make a delay in performing of the second handler, so the first one will be performed 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);

Also, you can check if the user agent is some hell like IE, then use this method and your said one otherwise.

回答2:

Can you simply call the second function after you've finished preload() ?

Or if you dont want to directly call it after preload() then you could do something like set a flag and then set a timeout in the section function to wait until the first is done to execute.

If order is important you need to communicate between the functions.

来源：https://stackoverflow.com/questions/697271/javascript-event-hierarchy-in-prototype-framework