|
This is a test of a javascript progress bar.This is the closest thing you can get to a real loading bar with Javascript and HTML. To see the progress bar again in your browser, reload the page without having the browser cache the images by pressing CTRL+F5.Usually the slowest part on a page to load is the images. So the javascript file, progress.js, for this page uses the variable 'complete' on all the image elements to see whether they are done loading or not. For each image that is done loading it displays a progress indicator and a percentage. For more information just look at the javascript source. Right click on the link and click on "Save Target As..." progress.js
Notes: 4/13/10 - v. 1.4 - Bug fix from Martijn189 to help the bar not go past 100%. Added max-width to progress bar div and added a line to make percent only go to 100. 5/30/09 - v. 1.3b - Converted all html tags in the progress bar to lowercase so that it would be compatible with xhtml. 5/27/09 - v. 1.3 - The progress bar was not displaying correctly if doctype was strict. "http://www.w3.org/TR/html4/strict.dtd". Part of the problem was that strict doctype requires that top, left, height and width settings be followed by px. I went through progress.js and added + 'px' to every line that needed it including: document.getElementById('bar').style.width = new_width + 'px'; Now it seems to work fine in strict mode. 9/19/07 - v. 1.2 - Previously if you had a VERY large document and/or a lot of ads like adsense ads that were slow loading and/or a user was accessing your web page using dial-up, then the progress_bar() function would just count 1 or 2 images for the document even though there might be 5 or 6. When this happened the progress bar would close prematurely. So now there are added functions to make sure that the body of the document is completely loaded before we close the progress bar. That way the script can count the true amount of images on the page with var image_count = document.getElementsByTagName("img").length;. With all browsers I could just use the window.onload function to find out if the document is done loading. But I did not want to rely on this function just in case you may be using it in your own javascript functions. If you are not using it then you can uncomment the line window.onload = saydone;. (For now I have a timer function set for these other browsers to close the progress bar. See the javascript file for info.) For the most popular browsers (IE, Netscape, Firefox, Safari)
I was able to use some built-in functions to check to see if the
document was loaded.
9/18/07 - v. 1.1 - Previously if a very large image was loading then the progress bar would sit there at a certain percentage. Now the progress bar will move up 1% every second until the image is done loading or until the bar reaches the next bar_part's percentage (where it should be for the next image.) 9/6/07 - v. 1.0 - Progress Bar Created |
Back to www.seabreezecomputers.com
|
User Comments
|
