[jQuery] How to show loading div only when loading takes longerthan a certain amount of time
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=449503419-08112006><FONT face=Arial
color=#0000ff size=2>That did it Aaron thanks.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=449503419-08112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=449503419-08112006><FONT face=Arial
color=#0000ff size=2>The key to it was the last part:</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=449503419-08112006><FONT face=Arial
color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=449503419-08112006><FONT face=Arial
color=#0000ff size=2><FONT face="Times New Roman" color=#000000
size=3> if(this.style.display !=
"none") { <BR>
$(this).hide();<BR>
}</FONT><BR></FONT></SPAN></DIV>
<DIV><FONT face=Arial color=#0000ff size=2></FONT><FONT face=Arial color=#0000ff
size=2></FONT> </DIV>
<DIV><SPAN class=449503419-08112006><FONT face=Arial color=#0000ff
size=2>Chris.</FONT></SPAN></DIV>
<DIV><BR></DIV>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Aaron
Heimlich<BR><B>Sent:</B> Wednesday, November 08, 2006 11:12 AM<BR><B>To:</B>
jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] How to show loading div only
when loading takes longerthan a certain amount of time<BR></FONT><BR></DIV>
<DIV></DIV>Off the top of my head (read: completely untested), you could do
something like:<BR><BR>var timeoutID;<BR>var toDelay =
5000;<BR>$("#loading")<BR> .ajaxStart(function()
{<BR> // Delay the loading animation
for "toDelay" milliseconds (5000 in this case, which is 5
<BR> //
seconds)<BR> timeoutID =
setTimeout(function()
{<BR>
$(this).show();<BR> },
delay);<BR> })<BR> .ajaxStop(function()
{<BR> // Clear the
timeout<BR> clearTimeout(timeoutID);
<BR><BR> // If the timeout gets
cleared before 5 seconds have passed, then the
loading<BR> // animation is still
hidden, so we don't need to hide it
again<BR> if(this.style.display !=
"none") { <BR>
$(this).hide();<BR>
}<BR> });<BR><BR>
<DIV><SPAN class=gmail_quote>On 11/8/06, <B class=gmail_sendername>Chris W.
Parker</B> <<A
href="mailto:cparker@swatgear.com">cparker@swatgear.com</A>> wrote: </SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">Hello,<BR><BR>I've
got a loading animation that appears each time a request is made<BR>through
AJAX but I'm thinking about getting rid of it altogether because<BR>the
loading happens so quickly. The animation is actually just kind
of<BR>annoying.<BR><BR>But I was thinking that instead of getting rid of it
entirely I could <BR>just make it appear if the loading takes longer than
n-seconds. I'm<BR>using ajaxStart() and ajaxStop() to show the
animation.<BR><BR><BR><BR>Thanks,<BR>Chris.<BR><BR><BR>_______________________________________________
<BR>jQuery mailing list<BR><A
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
href="http://jquery.com/discuss/">http://jquery.com/discuss/</A><BR></BLOCKQUOTE></DIV><BR></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/