jQuery_jquery를 기반으로 시뮬레이션된 페이지 로딩 진행률 표시줄 구현-JS 튜토리얼-php.cn

전체 페이지의 크기와 현재 어떤 방법으로든 로드된 양을 알 수 없기 때문에 로딩 진행률 표시줄을 만드는 유일한 방법은 이를 시뮬레이션하는 것입니다. 그럼 어떻게 시뮬레이션할까요?
jQuery_jquery를 기반으로 시뮬레이션된 페이지 로딩 진행률 표시줄 구현

페이지가 위에서 아래로 실행된다는 것을 알고 있습니다. 이는 페이지의 특정 위치에 로드된 양을 대략적으로 추정한 다음 jq를 사용하여 진행 상황을 시뮬레이션할 수 있음을 의미합니다. 표시할 바입니다.

먼저 위 그림과 같은 진행률 표시줄을 그립니다. 자세한 설명은 필요하지 않습니다.
CSS

코드 복사 코드는 다음과 같습니다.

 
.loading{position:relative;top:0;left:0} 
.tip1{float:왼쪽 ;배경:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative} 
.jindu{float :왼쪽;여백-왼쪽:20px; 색상:#fff;너비:150px;높이:32px;라인 높이:32px;배경:#000;위치:상대} 
.jindu b{color:#A70000;너비 :0;높이:0;글꼴-크기:0px;경계-너비:10px;경계-색상:#fff #fff #fff #A70000;경계 스타일:solid;위치:절대;왼쪽:-20px;위쪽:5px ;overflow:hidden} 
.jindu .jindu2{너비:0px;height:32px;line-height:32px;배경:#A70000;위치:절대} 
.jindu .text{너비:150px;높이: 32px;line-height:32px;text -align:center;position:absolute} 
　

HTML

코드 복사 코드는 다음과 같습니다.

시스템 초기화
 >

총 페이지 진행률0%

이때 주의하세요 , jquery 라이브러리를 인용해야 합니다. 인용된 위치는 헤드 영역이 아니라 html 코드 바로 아래에 있습니다. 왜 그렇습니까? 스타일을 헤드에 넣는 이유는 페이지를 로드하는 첫 번째 단계에서 스타일이 로드되도록 하여 페이지가 지저분해지지 않도록 하기 위함입니다. JS는 필요하지 않으며, 페이지의 대용량 파일은 주로 js이므로 본문에 js를 로딩하는 것이 진행률 표시줄입니다.
진행률 표시줄은 jquery에 의해 그려지고 참조됩니다. 이제 진행률 표시줄을 이동시킬 수 있는 메서드를 작성해야 합니다.

코드 복사 코드는 다음과 같습니다.

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 글꼴').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 글꼴').text(b); ); 
} 
}; 

 
여기에 loading(a,b)를 입력하여 로딩 내용 프롬프트 정보와 로딩 진행률을 표시합니다. 여러 다른 js 라이브러리를 사용하여 로딩 진행 테스트를 수행합니다