집 >웹 프론트엔드 >JS 튜토리얼 >jquery 웹 페이지 로딩 진행률 표시줄을 구현하는 방법

jquery 웹 페이지 로딩 진행률 표시줄을 구현하는 방법

小云云원래의: 2018-01-10 10:58:172562검색

이 글은 주로 jquery 웹 페이지 로딩 진행률 표시줄의 구현을 소개합니다. 관심이 있으신 분들은 읽어보시면 도움이 될 것입니다.

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

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

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

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

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

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

<p class="loading"></p>

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

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

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

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

각 노드가 로드된 후 jQuery는 animate() 애니메이션 메서드를 호출하여 진행률 표시줄의 너비를 변경하는 데 50밀리초가 소요되어 진행률 표시줄이 더 부드럽게 표시되는 것을 볼 수 있습니다. 0%에서 100%로 변경되어 진행률 표시줄의 진행 애니메이션이 완료됩니다.

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

$(document).ready(function(){ 
  $(&#39;.loading&#39;).fadeOut();   
});

jquery 웹 페이지 로딩 진행률 표시줄을 구현하는 방법

관련 기사