You will want to put the line where you show the meter_off image, in the success callback from the ajax request. This will ensure the proper order of execution. Pseudo code:

var myAjaxCall = function() {
   $.ajax({ success: function() {
           $("#meter").attr("src","img/meter_off.gif").show();
           },
           // other ajax parameters here
   });
}

$("#meter").attr("src","img/meter_on.gif").show('fast', function() { myAjaxCall(); });

-- Josh


       success:
----- Original Message ----- From: "Trans" <[EMAIL PROTECTED]>
To: "jQuery (English)" <jquery-en@googlegroups.com>
Sent: Tuesday, January 08, 2008 1:20 PM
Subject: [jQuery] Progress image swap



Hi--

I'm pulling my hair out trying to make this work. I want to change an
image to an animated gif to indicate progress while I pull down some
files via synchronous ajax, and then switch the image back to a static
one when finished. Everything I try fails, invariably the animated gif
doesn't become visible until all the ajax loads complete, and then of
course it gone. HEre the basic code I have at them moment:

 $("#meter").attr("src","img/meter_on.gif").show('fast', function() {
   load_stuff_with_ajax();
   $("#meter").attr("src","img/meter_off.gif").show();
 });

Any help will is greatly appreciated. I can;t tell you how sick I am
of reading tutorials saying how easy AJAX is when the simple things
like seem impossible to figure out.

Thanks,
T.


Reply via email to