Loading Bar

@HaganeNoKokoroNov 01.2004 — #Something like this maybe?

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 var totalBytes=150000;
 var loadedBytes=0;
 var statusBarWidth=200;
 var statusBarHeight=20;
 function displayStatusBar() {
 document.write("&lt;div style='position:relative;width:"+statusBarWidth+"px;height:"+statusBarHeight+"px;border:solid #aabbff 1px'&gt;");
 document.write("&lt;img id='statusBar' src='images/bar.bmp' style='width:1px;height:"+statusBarHeight+"px'&gt;&lt;/div&gt;");
 }
 function updateStatusBar(nBytes) {
 loadedBytes+=nBytes;
 var currentWidth=Math.round(loadedBytes/totalBytes*statusBarWidth);
 document.getElementById("statusBar").style.width=currentWidth+"px";
 }
 displayStatusBar(); //write the status bar at the top of the page
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="main"&gt; 
 &lt;img src="images/bm1.jpg" onload="updateStatusBar(50000);"&gt;
 &lt;img src="images/bm2.jpg" onload="updateStatusBar(50000);"&gt;
 &lt;img src="images/bm3.jpg" onload="updateStatusBar(50000);"&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

It's not a very good way to do it. Basically, you have to tell it how much to add to the currently loaded amount whenever an image loads, and you have to know the total beforehand. In the example, each image added 50000 to the loaded total, which I of course set as 150000. so after each image loads, the status bar jumps by 1/3. If you have access to server-side code, you could use that to fill in accurate file size values for the images and total.

I really have no idea if there is a way to just access the percentage of the page loaded. It doesn't seem likely, since it would have to know how much the total was, including images etc, and I think browsers work more by reading the html, then fetching whatever else is needed in separate requests.

@Warren86Nov 01.2004 — #I don't know if you will find this to be useful, but the following is an ActiveX progress bar. Clicking on it will increase the "progress." The min and max values are 0 and 100, respectively.

All you need to do is create a function that modifies the ProgressBar1.value. The onclick code is only for the purpose of demonstrating it.

<HTML>

<HEAD>

<Script Language=JavaScript>

var isProgress = 0;

function updateProgress(){

isProgress = isProgress+10;

ProgressBar1.value=isProgress;

}

</Script>

<SCRIPT LANGUAGE="VBScript">

Sub ProgressBar1_Click()

updateProgress()

end sub

</SCRIPT>

</HEAD>

<BODY>

<OBJECT ID="ProgressBar1" WIDTH=123 HEIGHT=20

CLASSID="CLSID:0713E8D2-850A-101B-AFC0-4210102A8DA7">

<PARAM NAME="_ExtentX" VALUE="2646">

<PARAM NAME="_ExtentY" VALUE="1323">

<PARAM NAME="_Version" VALUE="327682">

<PARAM NAME="Appearance" VALUE="1">

</OBJECT>

</BODY>

</HTML>

Loading Bar

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Loading Bar

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴