<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 12pt;
font-family:Calibri
}
--></style></head>
<body class='hmmessage'><div dir='ltr'><br><br><div>> Date: Mon, 30 Dec 2013 13:03:54 -0500<br>> From: marc@infomarc.info<br>> To: phpmyadmin-devel@lists.sourceforge.net<br>> Subject: [Phpmyadmin-devel] js advice please<br>> <br>> Hi,<br>> I'm working on a bug [0]. The solution I'm trying is:<br>> <br>> - use display:none on the throbber<br>> - temporarily replace the navi reload image with the throbber image<br>> <br>> My problem is that the reloading operation is so fast (less than one <br>> second) that I cannot see the throbber image. When I add an alert just <br>> before putting back the reload image, I have the proof that the throbber <br>> image is there.<br>> <br>> So, how can I ensure that the throbber image stays there at least, say, <br>> one or two seconds? I tried with setTimeout() to no avail.<br>> <br>> [0] https://sourceforge.net/p/phpmyadmin/bugs/3920/<br>> <br>> -- <br>> Marc Delisle<br>> http://infomarc.info | http://phpmyadmin.net</div><div><br></div><div>Hi, </div><div>From what I understand the issue to be, I gathered the following:</div><div><br></div><div><div> <div id="loaderImage"></div></div><div><script type="text/javascript"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cSpeed=11;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cWidth=128;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cHeight=128;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cTotalFrames=18;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cFrameWidth=128;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cImageSrc='images/sprites.gif';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cImageTimeout=false;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cIndex=0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cXpos=0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var cPreloaderTimeout=false;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var SECONDS_BETWEEN_FRAMES=0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function startAnimation(){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>document.getElementById('loaderImage').style.width=cWidth+'px';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>document.getElementById('loaderImage').style.height=cHeight+'px';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//FPS = Math.round(100/(maxSpeed+2-speed));</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>FPS = Math.round(100/cSpeed);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>SECONDS_BETWEEN_FRAMES = 1 / FPS;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function continueAnimation(){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cXpos += cFrameWidth;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//increase the index so we know which frame of our animation we are currently on</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cIndex += 1;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//if our cIndex is higher than our total number of frames, we're at the end and should restart</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>if (cIndex >= cTotalFrames) {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cXpos =0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cIndex=0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>if(document.getElementById('loaderImage'))</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function stopAnimation(){//stops animation</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>clearTimeout(cPreloaderTimeout);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cPreloaderTimeout=false;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function imageLoader(s, fun)//Pre-loads the sprites image</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>clearTimeout(cImageTimeout);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>cImageTimeout=0;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>genImage = new Image();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>genImage.onerror=new Function('alert(\'Could not load the image\')');</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>genImage.src=s;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//The following code starts the animation</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>new imageLoader(cImageSrc, 'startAnimation()');</div><div></script> </div>> </div><div>> ------------------------------------------------------------------------------<br>> Rapidly troubleshoot problems before they affect your business. Most IT <br>> organizations don't have a clear picture of how application performance <br>> affects their revenue. With AppDynamics, you get 100% visibility into your <br>> Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!<br>> http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk<br>> _______________________________________________<br>> Phpmyadmin-devel mailing list<br>> Phpmyadmin-devel@lists.sourceforge.net<br>> https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel<br></div> </div></body>
</html>