onComplete for Ajax.Request buggy with cached content

I have a Ajax.Request in which I use onLoading and onComplete to show and hide a load animation gif. The problem is that every 10 clicks or so, the load animation fails to hide and just stays there animating even though the ajax request has returned successfully. I have a number of div elements that each has its own respective load animation and an onclick with the Ajax.Request that looks like this:

    <div id="word_block_<%= word_obj.word %>" class="word_block" >
    <%= image_tag("ajax-loader_word_block.gif", :id => "load_animation_#{word_obj.word}",
                    :style => 'display:none') %>
    <a href="#" onclick="new Ajax.Request('/test/ajax_load', 
     {asynchronous:true, evalScripts:true, 
      onLoading:function() {
        Element.show('load_animation_<%= word_obj.word %>')},
      onComplete:function(){
        Element.hide('load_animation_<%= word_obj.word %>')}}); 
        return false;">Click Here</a>  
    </div>

Does it look like anything could be wrong with this? Maybe I should try removing the inline onclick and add an onc开发者_如何学编程lick programmatically with javascript? I really have no idea why this keeps happening. I am using the prototype library with ruby on rails.

I found the onLoading property to be flaky too... Let's say your query is cached already and comes back almost straight away to your front end code. Now let's say as well that for some reason, executing the onLoading method takes longer than the onComplete method. Finally, let's be crazy and assume that ajax is asynchronous and that it won't wait for the onLoading method to be finished before it starts the onComplete one. And then you have the reason of your problem! To sum up: - The request is sent - The onLoading method is fired but not started yet for some reason - The request comes back almost instantly - The onComplete method is fired and starts straight away => you end up with the onComplete method to be finished before the onLoading starts: your element will hide and then show!

As a work around, why not having your "Element.show('load_animation_<%= word_obj.word %>')}" right before you create your Ajax request object? So you don't rely on the onLoading method and the "asynchronousity" that goes with it?

As well, I always add "requestHeaders: [ "If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT" ]" to my ajax requests to prevent the request to be cached, especially in IE where cached ajax requests can mess up big time!