We help IT Professionals succeed at work.

How to load javascript files with a progress bar

drunkenlogic
drunkenlogic asked
on
346 Views
Last Modified: 2012-05-05
I have searched the net but no luck...
Is there anyway i can load my Java script files  and show the download process in the progress bar and when the download is done only then show the web page?

something like yahoo mail beta or windows live mail

thanks
dlogic
Comment
Watch Question

Step 1

Make a folder named "Test".
Create a GIF file named "loading.gif" showing a moving progress bar. Save it in the folder "Test". A good size would be 214 x 200 pixels.

Step 2

Copy and paste the following code in Notepad and save it as "index.html" in the folder "Test":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META HTTP-EQUIV="Content-Language" CONTENT="en">
 <title>Test Page</title>
<style type="text/css">
#divLoadCont{position:absolute; width:100%; height:98%; top:0; left:0; background-color:white; font-family:arial,helvetica; z-index:100}
</style>
<script src="loading.js"></script>
</head>
<body onload="hideIt();fillup()" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
      <script>
      if(bw.bw) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center" valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Page Loading&#20013;&#12391;&#12377;</h3><img src="loading.gif" border="0" alt=""><h3>Please wait</h3></td></tr></table></div>')
      </script>
<!--WRITE HERE THE CONTENT OF YOUR WEBPAGE-->
</body>
</html>


Step 3
Copy and paste the following code in Notepad and save it as "loading.js" in the folder "Test", leaving the copyright message intact:


/*
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
*/
//Default browsercheck, added to all scripts!
function checkBrowser(){
      this.ver=navigator.appVersion
      this.dom=document.getElementById?1:0
      this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
      this.ie4=(document.all && !this.dom)?1:0;
      this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
      this.ns4=(document.layers && !this.dom)?1:0;
      this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
      return this
}
bw=new checkBrowser()
//Hides the div
function hideIt(div){
      if(bw.bw){
            div="divLoadCont"
            obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?document[div]:0;
            obj.visibility='hidden'
      }
}


Step 4

Run "index.html" in your browser to test the result.

Author

Commented:
this doesnt work in IE6!!!!

Author

Commented:
I am looking for something like document  preloader
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.