Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
916 views
in Technique[技术] by (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

56.8k users

...