Tutorials Home

Web Application Tutorials in PHP

Slow Loading Page

10/14/2005

A slow loading page can be very useful for a web site that may process something that takes a long time. For example a file-upload script or even a search process that might take a long time to process such as those seen on popular travel web sites such as Orbitz, Expedia, Travelocity, etc. In PHP, they are very simple to implement with some basic javascript code an using the buffer flush ability that PHP offers.

Let's get started!

The first step is to create the loading page, I prefer to use a templating system such as Smarty to abstract my HTML from the PHP, but you can do this just fine by closing the php tag. Define your HTML to be shown on the loading page, I also like to include an animated gif that alerts the user that something is loading. You can even use the PEAR package HTML_Progress to display a progress bar. This would be especially nice if you have a way of determining the progress of your slow process. Next is ro set up the output buffering and to flush your loading page.

<?php ob_flush(); flush(); ?>

Updating as progress changes

To make your loading page even more captivating, you might want to update the status. This can be done by the HTML_Progress library, or more easily with plain text and a bit of javascript. If you specified a message defined in an HTML tag with an id attribute, we can change the text with Javascript.

<?php // Update Loading Page $message = "Loading Result List"; echo '<Script language="JavaScript" type="text/javascript">' . 'if (document.getElementById) ' . "document.getElementById('statusLabel').innerHTML = '$message';\n" . 'if (document.all) ' . "document.all['statusLabel'].innerHTML = '$message';\n" . 'if (document.layers) ' . "document.layers['statusLabel'].innerHTML = '$message';\n" . '</script>'; ob_flush(); flush(); ?>

We are done, finally!

Once your slow process is complete, we will need to forward the user onto the results page. This is simply done with a quick Javascript statement as follows

<?php // Redirect to Results Page url = 'results.php'; echo '<Script language="JavaScript" type="text/javascript">' . "window.location.href = '$url';" . '</script>'; ?>

Last Updated: Monday, March 3, 2008 at 10:20pm

Get Firefox!