Use jQuery to simulate the implementation code of the page loading progress bar

Because we cannot obtain the size of the entire page and the size of the current page in any way, the only way to create a loading progress bar is to simulate it. How can we simulate it?
We know that the page is executed from top to bottom, that is to say, we can roughly estimate how much is loaded at a location on the page, and then use jq to simulate a progress bar for display.
First, let's draw a progress bar, that is, the figure. You don't need to describe it too much and read the code yourself.
CSS
Copy codeThe Code is as follows:
* {Margin: 0; padding: 0; font-size: 12px}
. Loading {position: relative; top: 0; left: 0}
. Text input {float: left; color: # fff; height: 32px; line-height: 34px; padding: 0 15px; background: # A70000; border: 0}
. Jindu {float: left; margin-left: 14px; color: # fff; width: 150px; height: 32px; line-height: 32px; background: #000; position: relative}
. Jindu B {color: # A70000; font-size: 0px; border-width: 10px; border-color: transparent # A70000; border-style: dotted solid; position: absolute; left:-16px; top: 5px}
. Jindu. jindu2 {width: 0px; height: 32px; line-height: 32px; background: # A70000; position: absolute}
. Jindu. text {width: 150px; height: 32px; line-height: 32px; text-align: center; position: absolute}

HTML
Copy codeThe Code is as follows:
<Div class = "loading">
<Div class = "text"> <input type = "button" value = "Initializing"> </div>
<Div class = "jindu">
<B> </B>
<Div class = "jindu2"> </div>
<Div class = "text"> total page progress <font> 0 </font> % </div>
</Div>
</Div>

At this time, we should reference the jquery library. The reference is not in the head area, but written below the html code. The reason why we put the style in the head is to ensure that the style is loaded in the first step of page loading, so that the page will not be messy. JS does not need it. In addition, a large file on the page is mainly js, so loading js in the body is for the sake of progress bar.
The progress bar has been drawn, and jquery has referenced it. Now we need to write a method to make the progress bar move.
Copy codeThe Code is as follows:
Var loading = function (a, B ){
Var c = B * 1.5;
If (B = 100 ){
$ ('. Loading. jindu2'). animate ({width: c + 'px'}, 500, function (){
$ ('. Loading input'). val ();
$ ('. Loading font'). text (B );
$ ('. Loading'). animate ({top: '-32px'}, 1000, function (){
Alert ('page load finished ');
});
});
} Else {
$ ('. Loading. jindu2'). animate ({width: c + 'px'}, 500, function (){
$ ('. Loading input'). val ();
$ ('. Loading font'). text (B );
});
}
};

Here I wrote a loading (a, B). The two parameters are the loading content prompt information and the loading progress percentage respectively. Then I used several other js libraries to test the loading progress.
Copy codeThe Code is as follows:
<Script type = "text/javascript"> loading ('loading jQuery UIS ', 30); </script>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"> </script>
<Script type = "text/javascript"> loading ('loading Chrome framework', 50); </script>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"> </script>
<Script type = "text/javascript"> loading ('loading extjs', 70); </script>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"> </script>
<Script type = "text/javascript"> loading ('loading mootools', 90); </script>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"> </script>
<Script type = "text/javascript"> loading ('loading dojo ', 100); </script>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"> </script>

Demo: Online demo click to download