jQuery timing - wanting to add something akin to DoEvents() in a method

I have a table of dat开发者_StackOverflowa that contains about 260 rows. Each of these rows is identified by an attribute such as parentHeaderName. When the header of that table is clicked, I have some jQuery in place that briefly changes the header to an ajaxload.gif image, like this

$('#Header').html('<img src="images/ajaxload.gif"');

and then I toggle all 260 rows by calling

$([parentHeaderName=something]).toggle();

Unfortunately, I am not able to get the part of my code that changes the header to the ajaxload.gif to run properly. It is as though both that statement, and the toggle statement, are running all at the same time. Meaning, that the user never sees the ajaxload.gif. The only way I can get the image to show is if I put an alert('...') message between the two statements. Obviously, this is not desired as a solution. I've tried using delay() and setTimeout to no avail. I guess what I need is some sort of DoEvents equivalent in jQuery or javascript that would let the image show prior to the toggle execution.

Any ideas?

Thanks, Chris

UPDATE: Thanks for the feedback folks. Here's the actual code:

$('.sixdegreestypeheader').click(function() {
    var headerName = $(this).attr("headername");
    var jq = "[headername$=" + headerName + "]";
    var jq2 = "[parentheadername$=" + headerName + "]";

    var originalTextValue = $(jq).text();
    var originalHTMLValue = $(jq).html();

    if (originalHTMLValue.indexOf("collapse") == -1) {
        $(jq).html('<img src="images/collapse.gif" /> ' + originalTextValue);
    }
    else {
        $(jq).html('<img src="images/expand.gif" /> ' + originalTextValue);
    }

    // alert('break here to act as a DoEvents.') // this forces the image change... but I don't want to have to use an alert to force this
    $(jq2).toggle();

    return false;
});

(This code actually changes the header to expand.gif or collapse.gif, rather than ajaxload.gif.)

I did try the delay suggestion

$(jq2).delay(500).toggle();

but it did not help any. When the number of rows that need to get toggled is small - say, up to about 20 - there is no problem. But in some cases, I need to hide a bunch (e.g. 260), and it is as though the browser needs several seconds to chug through the DOM to do all of its hiding of things. That's why I was originally hoping to use the ajaxload.gif image.

Thanks, Chris

---

Thanks for the help everyone. As it turns out, the problem was more with the toggle() statement then anything else. .toggle()ing so many records is what caused the browser to hang for a bit, regardless of what I did in terms of .delay(), .when(), etc. I ended up doing a straight .hide() and .show(), and these changes sped things up to expected behavior. In order to determine the current visibilty (and thus to know whether I should .hide() or .show()), I checked the visibility of the first matched element, e.g. $(criteria:first:visible) and proceeded appropriately.

Thanks again, and best regards.

-- Chris

---

My first thought is just that this toggle is happening so fast that you do not even need the ajaxload.gif at all. So, if that is the case, that is a good thing, right?

My second thought is in how you are re-replacing the ajaxload.gif with whatever the header text was...when and how does this callback happen?

My third thought is that everything is happening very quick, which is good, but you still want to show the loader no matter what...if that is the case, throwing a .delay(500) or whatever amount of time into your chain, should make it hold. I feel like there is more code involved that you did not show, could ya show this?

Here is my quick thought to try in the mean time....

$( function(){
    var header = $('#Header');
    header.bind('click', function(){
        $(this).html('<img src="images/ajaxload.gif">');
        $([parentHeaderName=something]).delay(500).toggle();
    });
});

Now this will actually make the toggle wait before firing, so, you might want to put that delay on the chain that happens right BEFORE you replace the ajaxload.gif with the header text again....

I hope this helped in some way, otherwise give me more info and i'd be happy to take a further look.

EDIT:

Ok, now i'm thinking it has to do with the images not being loaded, and the alert is giving these images time to load. Because these images are not on the page in the first place, the page has no reference to them before you load them in, so this could me messing with your timing...maybe trying doing a load, then on the callback, set your click...if you are using jquery 1.5, when might help...

$.when( $('<img src="images/collapse.gif" />').load(), $('<img src="images/expand.gif" />').load() ).then( clickSetUp );

clickSetUp being your click function...

Give it a try, ill be around :)