Shulou(Shulou.com)06/01 Report--

This article mainly introduces "jquery how to achieve web page loading progress bar", in daily operation, I believe many people in jquery how to achieve web page loading progress bar problems there are doubts, small make up to consult all kinds of information, sort out simple and easy to use operation method, hope to answer "jquery how to achieve web page loading progress bar" doubts helpful! Next, please follow the small series to learn together!

As shown below, when the page loads, the red progress bar at the top

The advantage of page loading progress is that it can better reflect the loading progress of the current page. The loading progress bar can be animated to complete the process of page loading from 0% to 100%. However, the current browser does not provide an interface for page loading progress, that is, the page cannot accurately return the actual page loading progress. 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. So we can't achieve 0-100% load display process by data size.

Therefore, we need to set nodes in several jump lines of the whole page code through the line-by-line loading feature of html code, and perform approximate fuzzy progress feedback to achieve the effect of progress loading. Each time the page is loaded into the specified area, it returns (n)% of the progress results. By setting multiple nodes, it achieves the purpose of displaying the loading progress step by step.

If there is a page, divided into four parts according to the block header, left content, right sidebar, 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:

header Content on the left Right sidebar footer section

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

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

.loading{ background:#FF6100; //Set the color of the progress bar height:5px; //Set the height of the progress bar position:fixed; //Set the progress bar to scroll along the screen top:0; //Pin the progress bar at the top of the page z-index:99999 //Increase the priority level of the progress bar to avoid being obscured by other layers}

Next, we'll add a progress animation to each node, using jQuery.

header $('. loading').animate({'width':' 33%'},50); //first progress node Content on the left $('. loading').animate({'width':' 55%'},50); //second progress node Right sidebar $('. loading').animate({'width':' 80%'},50); //third progress node footer section $('. loading').animate({'width':' 100%'},50); //fourth progress node

As you can see, after loading a node, jQuery calls the animate() animation method to change the width of the progress bar. Each node changes in 50 milliseconds to make the progress bar look smoother. Finally, it changes from 0% to 100%, completing the progress animation of the progress bar.

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

$(document).ready(function(){ $('.loading').fadeOut(); }); At this point, the study of "jquery how to achieve web page loading progress bar" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.