Show loading GIF in jQuery without AJAX?

Question

I know how to do this with

$(gif).show(); 
$.post( action, data, function(result) { $(gif).hide(); } );

// using ajaxStart and ajaxStop is a better way too

But, I don't know how to do it without using post, I tryed

$(gif).show();
doAction();    // No post...
$(gif).hide();

The problem is, while doAction function is running the $(gif) isn't visible .... I tryed with timeouts too, but the problem is that ends before or after depending of the doAction() duration...

Answer 1

That should work, if whatever doAction() does is synchronous.

If it isn't, then you will need to call the hide method in a callback that fires when the operation (whatever it is) finishes.

Answer 2

$(gif).hide() can fire while your doaction is performing some ajax call (search) for example, which takes time.

The purpose of putting the hide function after the function(result) is so that it is only called when your ajax call comes back with the results.

If you do not want to depend on ajax complete to show or hide your loader, you can put your results on a DIV layer which covers the loader. (higher z-index)