The first thing I tried was to create a meta-refresh page with a nice graphic from Ajaxload centered right in the middle:
<html> <head> <title>Loading...</title> <meta http-equiv="refresh" content="0;url=report.cfm"> </head> <body> <br> <p style="text-align: center;"><img src="/images/loading-indicator_94x56.gif" width="94" height="65" alt="Loading..." border="0" /></p> <br> </body> </html>
There were a couple of problems. First off, the graphic didn't animate in IE. Apparently, IE stops animations when the page starts to unload. Second, the graphic wasn't centered in the horizontal and vertical part of the page. So, to fix the first problem, I increased the refresh delay to 3 seconds instead of 0. And then to fix the second problem, I changed the image call from an inline tag to a background in the body's style attribute, with its position at 50% of width and 50% of height:
<html> <head> <title>Loading...</title> <meta http-equiv="refresh" content="3;url=report.cfm"> </head> <body style="background-image: url(/images/loading-indicator_94x56.gif); background-repeat: no-repeat; background-position: 50% 50%;"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
This seemed to work pretty well... in Firefox, the image animated nicely all through the page unload until the new page appeared, but it didn't vertically center very well-- it just centered itself to the height of the combined <br /> tags. IE didn't animate as well as I'd like, since it still stops the animation when the refresh starts (at least it lasted 3 seconds), but it did center the animation perfectly to the window height and width. There was just one last problem: every once in a while, the image wouldn't show up at all in IE. I guessed the problem was that the background image wasn't loading before the page refresh started. The solution to that is to preload the image via JavaScript in the header, since doing so would require the image to be preloaded before the body is rendered. I also made the redirect URL dynamic with a ColdFusion URL variable:
<cfparam name="URL.redirect" default="report.cfm"> <html> <head> <title>Loading...</title> <script language="JavaScript"> if(document.images) image1 = new Image(); image1.src = '/images/loading-indicator_94x56.gif'; </script> <cfoutput><meta http-equiv="refresh" content="3;url=#URL.redirect#"></cfoutput> </head> <body style="background-image: url(/images/loading-indicator_94x56.gif); background-repeat: no-repeat; background-position: 50% 50%;"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
So there you have it. The best loading page that I've come up with so far. Try the loading page in action, and let me know if you have any reactions, suggestions, or better techniques.
Comments (2)
August 30, 2007
09:27AM | #
Nice!
September 4, 2007
14:34PM | #
Hi Tom,
I was wondering whether you can help with this: I need to display the same animation (not looping, just running once at a time) several times on the same page, in different locations. (it's for kids with learning problems, e.g. counting how many times a ball falls down or a frog jumps up).It works in Firefox, but IE only does the first gif animated, the others come just with the last frame - static. Even worse, when the kids get it wrong, the exercise should repeat...
I've preloaded a placeholder and the actual animations - the best I ever get is that it sort of animates the second time the gif is running.
Thanks, if you have anything to say to this.
Daniela