View Full Version : progression bar until page loads

01-13-2008, 06:45 AM
I have a page that loads around 1500 zip codes from a database, in ie7 it loads in 5 seconds in ff it takes about 15 seconds. I would like to use a progression bar that just shows an arrow going in circles until the page has loaded. I dont need it to show the amount loaded just show that somethings happening.

Im not very good with java script but if someone can point me to the right direction for a tutorial on it that would be great.

ps the progression bar is just a animated .gif that is an arrow circling.

I just need it to display when loading and hide when finished loading.


01-13-2008, 07:27 AM
the thing is when you click the button the page hangs for a while and waits for PHP to return HTML with your results in it by which time the need for a loader has gone

I too have had this problem

you have a couple of options here

when the submit button is pressed fire a JS function. The function will use an innerHTML method to display an animated gif on the current page (use a <div> as a marker for the image) then submit the form (using the same function);
use AJAX to display a proper loader with a real progress indicator.what do you think


have you set an index in your db? this may improve the speed

01-13-2008, 10:10 PM
I have the id set to primery key but thats it I have 3 other columns should i set them all to index?

01-14-2008, 06:00 AM
set an index in the zip code column then time the results

01-14-2008, 04:46 PM
here is the code to assign a dummy preloader


function submitter(){

document.getElementById('preloader').innerHTML= "<img src=\"preloader.gif\" \>";



place the following div where you want the image to appear

<div id="preloader"></div>

remember to remove the submit button and replace it with a standard button using an onclick event to call the function

i have attached a nice preloader but there are loads out there