How to implement jquery web page loading progress bar

This article mainly introduces the implementation of jquery web page loading progress bar. When the page is loading, the red progress bar at the top is displayed. If you are interested, you can learn about it. I hope it can help everyone.

The advantage of web page loading progress is that it can better reflect the loading progress of the current web page. The loading progress bar can be animated from 0% to 100% to complete the web page loading. this process. However, current browsers do not provide an interface for page loading progress, which means that the page cannot accurately return the actual loading progress of the page. In this article, we use jQuery to achieve the page loading progress bar effect.

The first thing we need to know is that currently no browser can directly obtain the size of the object being loaded. Therefore, we cannot achieve 0-100% loading and display process through data size.

Therefore, we need to use the line-by-line loading feature of html code, set nodes in several skip lines of the entire page code, and provide approximate fuzzy progress feedback to achieve the effect of progress loading. The general meaning is: every time the page is loaded into the specified area, the progress result of (n)% is returned. By setting multiple nodes, the purpose of displaying the loading progress step by step is achieved.

Suppose there is a page that is divided into four parts: header, left content, right sidebar, and footer. We regard these four parts as four nodes. When the page loads each node, Set the approximate loading percentage. The page structure is as follows:

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

Then we add the progress bar.loading to the first line below.

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

We need to set the style of the loading progress bar, set the background color, height, position, priority, etc.

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

Next, we need to add a progress animation behind each node and use jQuery to implement it.

<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>

It can be seen that after each node is loaded, jQuery calls the animate() animation method to change the width of the progress bar. Each node change takes 50 milliseconds to progress. The bar looks smoother, and finally changes from 0% to 100%, completing the progress animation of the progress bar.

When the progress bar reaches 100%, the page is loaded, and the last step to do is to hide the progress bar.

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

Related recommendations:

How to use video and audio tags and progress bars in H5

css3 Method to implement circular progress bar

A simple implementation method of web page progress bar

The above is the detailed content of How to implement jquery web page loading progress bar. For more information, please follow other related articles on the PHP Chinese website!