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 (7)
August 30, 2007
9:27AM | #
Nice!
September 4, 2007
2: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
November 2, 2008
2:10AM | #
Thank you for your website ;)
I made with photoshop backgrounds for youtube, myspace and ect..
my backgrounds:http://tinyurl.com/6rbxmr
Hope you had a good day and thank you again!
March 18, 2009
11:47AM | #
do a cfflush after the image. have the loading image contained above the tag. then do a javascript onload to hide the element. like this:
Please wait 1 moment as your data loads.
August 19, 2010
8:31PM | #
Love this script.
Only issue I've ran into is if you utilize target="_blank" to load the progress page, the image animation stops in IE once it starts unloading the page no matter what time you set for the refresh.
January 20, 2011
1:44PM | #
I got my first camera when I was 10 and more often than not have one with me. It won't be true to say I've figured out all the very complicated details that make a cool photo. However I am actually confindent I can handle almost everything, even an ET.
It's the retouching that is hard for me. I just can't understand the software thing. The final photograph usually looks strange in my opinion. People assure me I am really good but I can't understand whether it's true or just a compliment. The models I work with have never complained btw but that's to be expected. Having the right gadgets is just information mentioned in technical books. Not rarely despite the fact that I am trying my best I end up with a bit of a washed out brightness, unadjusted exposure or contrast. I mismatch the wheels combining the colors sometimes. It can be actually very frustrating however rant ends here.
January 22, 2011
10:11PM | #
Brit does it again with her latest track Hold It Against Me! Dr. Luke's and Max Martin's low beat fits nicely with Britney's electric vocals! Her track really makes me want to dance.