How to fire events programatically in jQuery?

Question

Hi All,

I have a page which loads divs of rounded corners. And on each div (including all the inner divs, spans inside this div) I call many events related to them. Now the problem I'm facing is load time. Do we have any approach to load the script for rounded corners first in "ready" function and rest of the events dynamically when I mouse over on the main div? Any approach which reduces my loading time would be of great help!

Example:

$(function(){
    $('.inner').corner({
     tl: { radius: 6 },
     tr: { radius: 6 },
     bl: { radius: 6 },
     br: { radius: 6 }
    });

    // loadDivEvents() in this we call the rest of the events upon
    // mouseover or any other event without multiple calls

});

function loadDivEvents(){
    //this may have many events/ajax calls
}

Answer 1

What is the actual issue with load time, if I may ask?

When the page is first loaded, any event-related functions are (usually) just getting tied to the elements in the page so that if and when the event occurs, the event-related function will execute. So I don't know if this will really impact your page load time.

What can impact your page load time is having tons and tons of event-related functions that you are trying to associate one at a time on page load.

For instance, if I have 10 lists, and each list has 10 list items, and I want any of the list items to turn green on hover-- if I have javascript that defines each of these 100 events separately, that may tax my overhead.

But!

If I move the binding of these events to AFTER the page loads and have this happen when I first mouse over the main div (or window, or on any event that will almost always occur next), then the overhead just gets passed to THAT event. The page is loaded, but now it's frozen while the events get dealt with. My user is really irked because he can't scroll down, and if the problem is bad enough, he can't close the page or switch to another window. He expected this when the page was taking forever to load, now it's just this random freeze that always happens when he goes to your page.

So if there is a page load issue, a better solution may be to find out if there is redundancies or unnecessary functions running. In the above example I gave, I could simply say "when ANY list items are moused over, they turn purple" that's one binding, versus 100. Or I may have made the easy mistake of having each of those 100 bindings actually do something (like check the value of the list item) which it really only needs to do AFTER the event that triggers it, not during page load. That would be 100 stalls that I didn't even mean to happen once during page load.

Answer 2

I fixed this thing by going with images instead of divs. I found it to be the best way to resolve this.