Problem – Slow loading pages are frustrating, for web users and developers too. Of course there are many possible tweaks you can use to speed them up, but sometimes you cannot optimize a page any further.
- UPDATED 2009-10-11
Solution – If you can’t beat them, join them. You can show a progress indicator to let your web users know that your server is thinking hard the answer to their request, but how do you do that?
Requirement 1 – You cannot put the progress indicator on the leaving page, because you don’t want to modify every single reference to a slow page. It doesn’t make sense either: a slow page is slow by itself! You really don’t need that coupling.
Requirement 2 – You cannot put the progress indicator on the landing page, the slow one, because the browser needs it before the slow page has arrived. If they arrive together, the progress indicator is useless!
There is a good article about this issue but it fails at implementing the first requirement. Anyway that was the idea I worked on when starting this project.
Here is the waiting page that get’s loaded while loading the slow page. For browsers other than IE, the trick is to change the document.location.href property after loading the progress indicator image. In IE we change the document.location.href and then add the image.
I used jQuery to make it simple.
waiting.php
{[.waiting /chili-web.php ]}
And here is the slow page.
slow-page.php
{[.slow-page /chili-web.php ]}
You can test it here.
This does not work on IE6
Now it does.
Sorry, newbie here! Where abouts within your slow-page.php code would I put my existing slow-loading code? Is it where the ‘sleep(10)’ is? Would I just put my entire code in there? Thanks!
Hi, me again. I’ve created two files with the contents as above. Visiting slow-page.php does trigger off the waiting.php page successfully, but the waiting page is never re-directed back to the slow-page. Why might this be? Thanks in advance for your help!
Hi, I don’t mean to spam, honest! I’ve now got one step further… I didn’t have a loading-page.gif before but have now created one. But now the pages flicker from one to the other continuously like they are stuck in a loop and not able to get out of it. Any idea? Thanks!
Doesn’t work well
I have the same troubles, could the author please respond and make it a little more clear on how to get this up and running?
@Tom, Guy, Brian
Thanks and sorry about that: there was something wrong with the approach described here. I’ve just updated this page to an earlier version, and it now works fine in IE8, FF3.5, Chrome3, Opera10, Safari4.