Web page Loading progress bar

(Web page loading, sometimes too much content, loading wait, while the page display white does not show anything, to the user's experience is quite bad, so, generally will be in the page before the success, will be in the form of a progress bar, to show users. Lets the user see the animation, knowing that the page is loading)

The common ways are the following:

1. Timer's progress bar (false)
<script type= "Text/javascript" >
$ (function () {
var loading= ' <div class= "loading" ><div class= "pic" ></div></div> ";
$ ("Body"). Append (loading);
SetInterval (function () {
$ (". Loading"). FadeOut ();
},3000);
});
</script>


2. Real get content, implement loading progress bar
To implement a progress bar based on real content, here are two points of knowledge:

Document.onreadystatechange Events when the page load state changes
Document.readystate Returns the status of the current document
1. Uninitialized-loading not yet started
2. Loading-loading
3. Interactive-loaded, the document and the user can start interacting
4. Complete-Loading completed

2.1. The code of the above timer can be modified to:

document.onreadystatechange=function () {
if (document.readystate== "complete") {
$ (". Loading"). FadeOut ();
}
}

2.2. Display the progress bar into a small animation of the CSS

Recommended Sites: https://preloaders.net/This site has a variety of small animations that indicate loading

http://autoprefixer.github.io/adding prefixes to CSS online

https://loading.io/progress bar Small animation


2.3: Position the progress level in the head, such as:


Note: This implementation, and not the actual display of the progress of the load, but the use of: code from top to bottom implementation of the principle
in different positions of the code, change the width of the line, at the end of the page, let the width be 100%.
such as:




2.4 Get the progress bar of loading data in real time
Create Image object: Image Object name = new Image ();
use: OnLoad event
Note: The SRC attribute must be written to the back of the onload or the program will be faulted in IE




Reference Course: http://www.imooc.com/learn/858

Web page Loading progress bar