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