我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示。

首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 ">

Home >Web Front-end >JS Tutorial >Implementing simulated page loading progress bar based on jQuery_jquery

Implementing simulated page loading progress bar based on jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 17:38:411146browse

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?
Implementing simulated page loading progress bar based on jQuery_jquery

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下载地址:点击下载
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn