user interface - Ajax loader image: How to set a minimum duration during which the loader is shown?

Question

I am using Jquery for Ajax functionality, and using a loader icon to indicate to the user that data is being retrieved. However, I want the user to see the loader icon for at least 1s, even if the data takes less than 1s to retrieve (if more than 1s is required, the loader icon should remain for the entire duration.

Here is the code for the loader HTML

<img id="loader" src="example.com/images/ loader.gif" style="vertical-align: middle; display: none" />

I am using the Jquery .Ajax function for my data processing.

Answer 1

I would use a counter that starts at 2 and is decremented after 1 second and when the ajax response comes in. Something along these lines:

var counter = 2;
function decrement() {
  if (--counter == 0) {
    $('#loader').hide();
  }
}
setTimeout(decrement, 1000);
$.ajax(..., complete: decrement);