Implementing simulated page loading progress bar based on jQuery_jquery

Because we can't get the size of the entire page and how much is currently loaded by any method, the only way to make a loading progress bar is to simulate it. So how to simulate it?


We know that the page is executed from top to bottom, which means we can roughly estimate how much is loaded at a certain location on the page, and then use jq to simulate a progress bar to display.

First we draw a progress bar, which is what it looks like in the picture above. There is no need to explain this too much. Just look at the code yourself
CSS

Copy code The code is as follows:

.loading{position:relative;top:0;left:0}
.tip1{float:left ;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative}
.jindu{float:left;margin-left:20px; color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;width:0;height:0;font- size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden}
. 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 code The code is as follows:

System initializing

Total page progress%

Attention at this time, we need to quote the jquery library, the quoted The location is not in the head area, but immediately below the html code. Why is this? The reason why we put the styles in the head is to ensure that the styles are loaded in the first step of loading the page, so that the page will not be messy. JS is not needed, and the large files on the page are mainly js, so loading js in the body is for the progress bar.
The progress bar is drawn and referenced by jquery. Now we have to write a method, that is, we can make the progress bar move

Copy code The code is as follows:

var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.bgloader .jindu2').animate({width:c 'px'},500,function(){
$('.bgloader .tip1').text(a);
$( '.bgloader font').text(b);
$('.bgloader .loading').animate({top:'-32px'},1000,function(){
$('.bgloader ').fadeOut();
});
});
}else{
$('.bgloader .jindu2').animate({width:c 'px'},500 ,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);
});
}
};

Here I wrote loading(a,b). The two parameters are to display the loading content prompt information and the loading progress percentage. Then, I used several other js Library does loading progress test

Copy code The code is as follows:

demo下载地址：点击下载