웹 페이지 로딩 진행률 바코드의 JavaScript 구현은 매우 simple_javascript 기술입니다.

웹페이지 진행률 표시줄은 현재 웹페이지의 로드 진행률을 더 잘 반영할 수 있습니다. 로드 진행률 표시줄은 웹페이지 로드 프로세스를 완료하기 위해 0%에서 100%까지 애니메이션으로 표시될 수 있습니다. 그러나 현재 브라우저는 페이지 로딩 진행에 대한 인터페이스를 제공하지 않습니다. 이는 페이지가 페이지의 실제 로딩 진행을 정확하게 반환할 수 없음을 의미합니다. 이 문서에서는 페이지 로딩 진행률 표시줄 효과를 얻기 위해 jQuery를 사용합니다.

HTML

가장 먼저 알아야 할 점은 현재 로드되는 개체의 크기를 직접 얻을 수 있는 브라우저는 없다는 것입니다. 따라서 데이터 크기를 통해 0-100% 로딩 및 표시 프로세스를 달성할 수 없습니다.

따라서 html 코드의 한 줄씩 로딩 기능을 사용하고, 전체 페이지 코드의 여러 건너뛰기 라인에 노드를 설정하고, 대략적인 퍼지 진행 피드백을 제공하여 진행 로딩 효과를 달성해야 합니다. 일반적인 의미는 페이지가 지정된 영역에 로드될 때마다 (n)%의 진행 결과가 반환된다는 것입니다. 여러 노드를 설정하면 로드 진행 상황을 단계별로 표시하는 목적이 달성됩니다.

페이지가 있는 경우 헤더, 왼쪽 콘텐츠, 오른쪽 사이드바, 바닥글의 네 부분으로 나누어집니다. 페이지가 각 노드를 로드할 때 대략적인 값을 설정합니다. 로딩 비율, 페이지 구조는 다음과 같습니다:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

그런 다음 아래 첫 번째 줄에 진행률 표시줄을 추가합니다.

<div class="loading"></div> 

CSS

로딩 진행률 표시줄 스타일, 배경색, 높이, 위치, 우선순위 등을 설정해야 합니다.

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

다음으로 각 노드 뒤에 진행 애니메이션을 추가하고 jQuery를 사용하여 구현해야 합니다.

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script> 

노드를 로드하지 않은 후 jQuery는 animate() 애니메이션 메서드를 호출하여 진행률 표시줄의 너비를 변경하는 것을 볼 수 있습니다. 각 노드 변경에는 진행률 표시줄이 더 부드럽게 보이도록 50밀리초가 걸리고 최종적으로 0에서 변경됩니다. %에서 100%까지 진행률 표시줄의 진행 애니메이션이 완료됩니다.

진행률 표시줄이 100%에 도달하면 페이지가 로드됩니다. 마지막 단계는 진행률 표시줄을 숨기는 것입니다.

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});