I have a web site I did for an interior designer. She has 6 web pages (galleries) with 10 pics each. When you choose a web page I first download the images to an array and show a progress bar in php.
The concept is that you use a cell of a table for the progress bar. You have 10 graphics. One for 10% done then a longer one for 20% etc. I used a red graphic.
<script language="javascript">
// Preload Progress Bar images
function LoadProgressBarimages() {
Progress01= new Image();
Progress01.src="images/progressbar21.jpg";
Progress02= new Image();
Progress02.src="images/progressbar22.jpg";
Progress03= new Image();
Progress03.src="images/progressbar23.jpg";
Progress04= new Image();
Progress04.src="images/progressbar24.jpg";
Progress05= new Image();
Progress05.src="images/progressbar25.jpg";
Progress06= new Image();
Progress06.src="images/progressbar26.jpg";
Progress07= new Image();
Progress07.src="images/progressbar27.jpg";
Progress08= new Image();
Progress08.src="images/progressbar28.jpg";
Progress09= new Image();
Progress09.src="images/progressbar29.jpg";
Progress10= new Image();
Progress10.src="images/progressbar30.jpg";
}
</script>
Here's the actual code where I preload the pics and update the progress bar each time.
<?
// Load the pictures and update the progress bar each time.
//
if (ob_get_level() == 0) {
ob_start();
}
?>
<? flush(); ob_flush();?>
<script language="javascript">
LoadProgressBarimages();
image01= new Image();
image01.src="images/portfolio_images/2.jpg";
document.getElementById('ProgressImage').src=images/Progress02.src;
</script>
<? flush(); ob_flush();?>
<script language="javascript">image02= new Image();image02.src="images/portfolio_images/3.jpg";document.getElementById('ProgressImage').src=Progress02.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image03= new Image();image03.src="images/portfolio_images/4.jpg";document.getElementById('ProgressImage').src=Progress03.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image04= new Image();image04.src="images/portfolio_images/CitYoga001.jpg";document.getElementById('ProgressImage').src=Progress04.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image05= new Image();image05.src="images/portfolio_images/CitYoga005.jpg";document.getElementById('ProgressImage').src=Progress05.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image06= new Image();image06.src="images/portfolio_images/CitYoga007.jpg";document.getElementById('ProgressImage').src=Progress06.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image07= new Image();image07.src="images/portfolio_images/CitYoga008.jpg";document.getElementById('ProgressImage').src=Progress07.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image08= new Image();image08.src="images/portfolio_images/DSC01715_001.jpg";document.getElementById('ProgressImage').src=Progress08.src;</script>
<? flush(); ob_flush();?>
<script language="javascript">image09= new Image();image09.src="images/portfolio_images/DSC01716_002.jpg";document.getElementById('ProgressImage').src=Progress09.src;</script>
<script language="javascript">image10= new Image();image10.src="images/portfolio_images/DSC01718_004.jpg";document.getElementById('ProgressImage').src=Progress10.src;</script>
<script language="javascript">document.getElementById('ProgressBarTable').style.visibility="hidden"; </script>
<? flush(); ob_flush();
ob_end_flush(); ?>
Notice the use of flush and ob_flush.
Hope this helps point you in the right direction. You need to know about how many items you are uploading so you can divide the number by 10 to know when to update the progress bar.
