Development thinking and application of JS program for Web page loading progress bar

A good product, all need to have a beautiful loading interface. The Lodaing interface not only brings a good experience to the user, but also effectively eliminates the frustration in the process of loading and waiting. The loading progress bar is a good feedback on the current load progress. Loading progress from 0%-100% effectively informs the user how long it will take to open the page.
The loading interface with a progress bar is not uncommon in programs, but in the web? So far, the browser does not provide a valid browser object to feedback the page loading progress, so it is not directly and conveniently get the page load progress feedback.
This article is mainly about how to achieve the page loading progress by means of jquery feedback method.
I. Realization of logic and concept
The first thing we need to know is that there is currently no browser that can directly get the size of the object being loaded. So we can't implement the 0-100% loading display process by data size.
So we need to take the load node to feedback the page has been loaded into a section, and make approximate fuzzy progress feedback to achieve the effect of progress loading. The general meaning is: each page loaded into the specified area, the return (n)% of the progress results, by setting up multiple nodes, to achieve step by step display the purpose of loading progress.
How to set it up specifically? First of all, we divided the Web page into a number of areas, in terms of Frontopen, the structure of the site is divided into head area, Mian area (the main part of the article), sidebar sidebar, foot foot four parts. Consider making a range of rough little progress feedback effects. Such as:
Set the progress feedback to four parts: the head section returns 30% progress, the main part returns 60% progress, the sidebar section returns 70% progress, and the last foot returns 100% after the load completes.
Second, the realization method
1. First we need to set a container for the progress bar setting in the HTML page. For example, under the body of Benbow there will be a "<div class=" Loading "></div>" div container, this is the next we need to operate and display the progress bar, of course, if you are interested, you can set more personalized progress bar.
2. Set the style for the loading container, take the Benbow progress bar as an example, the style is as follows:
. 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 follow the screen scrolling
top:0; Pin the progress bar to the top of the page
z-index:99999//Increase the priority level of the progress bar to avoid being obscured by other layers
}
3. Animate the progress bar through the animated animation effect of jquery. Simply make the idea and decide to use the load effect from left to right. The final animate execution code is "$ ('. Loading '). Animate ({' width ': ' 100% '},200);"
4. Consider the need to set up several load progress nodes. Above through the idea, we have decided to use 30%, 60%, 70%, 100% four progress nodes, respectively, inserted into the corresponding page position. and combined with the animate animation code above, finally determine the code for the four Progress nodes: $ ('. Loading '). Animate ({' width ': ' 30% '},50), $ ('. Loading '). Animate ({' width ': ' 60% '},50 '), $ ('. Loading '). Animate ({' width ': ' 70% '},50), $ ('. Loading '). Animate ({' width ': ' 100% '},50). You may ask, why did the speed become 50 milliseconds? Because the animation that was loaded as 100% in the previous step is divided into components, each slice is divided into 50 milliseconds to ensure the animation's coherence.
Iii. Examples of actual applications inserted into the page
Take the homepage file of index.php as an example, show us how to insert four nodes into the corresponding position. Of course, this example is only to better explain the above program planning conclusions, not limited to this method of Setup. You can play more of the imagination where you need it, extrapolate create a more brilliant style.
index.php File Code

<?php/** * The main template file. * * This is the  Most generic template file in a wordpress theme * and one  of the two required files for a theme  (the other being &NBSP;STYLE.CSS) . * it is used to display a page when  nothing more specific matches a query. * e.g., it puts  Together the home page when no home.php file exists. * learn  more: http://codex.wordpress.org/Template_Hierarchy * *  @package  wordpress  *  @subpackage  Twenty_Ten *  @since  twenty ten 1.0 */ini_set (' Display_errors ',  false);   //close error Get_header ();  ?>  //reference Template header php file <script  type= "Text/javascript" >         $ ('. Loading '). Animate ({' width ': ' 33% '},50);   //First Progress Node < /script>  <div class= "Main" >     <?php      /* Run the loop to output the posts.      * If you want to overload this in a child theme  Then include a file     * called loop-index.php and  that will be used instead.     */         get_template_part (  ' Loop ',  ' index '  );      ? >  </div><!--  #main  --><script type= "Text/javascript" >$ ('. Loading '). Animate ({' width ': ' 55% '},50);   //second node </script><?php get_sidebar ();  ? >  //referencing sidebar template php files<script type= "Text/javascript" >        $ ('. Loading '). Animate ({' width ': ' 78% '},50);   //third Node </script><?php get_footer (); ?>   //Reference Foot template php file <script type= "Text/javascript" >         $ ('. Loading '). Animate ({' width ': ' 100% '},50);   //Fourth node </script>

Iv. complementary improvement and optimization of procedures
Through the above three steps, has been basically able to complete the operation of the entire loading program. But after the progress bar is loaded, it can't disappear automatically? This is certainly not possible, so we need to use a different piece of code to hide the progress bar after the document is loaded.
The code is as follows:

$ (document). Ready (function () {$ ('. Loading '). FadeOut ();});

With the above settings, when page 100% is loaded, the fadeout function of jquery is executed, the progress bar is hidden, and the entire program is finished.
Conclusion: This paper makes the code as simple as possible, considering that it is easy for readers to learn. Of course, this example can also be used in most cases. It is hoped that readers can expand their thinking through this example and develop more excellent and powerful functions.

Development thinking and application of JS program for Web page loading progress bar