(When the webpage is loaded, sometimes the content is too much, and it has been loaded and waiting. At this time, the webpage shows that white does not display anything. The experience of the user is quite bad. Therefore The form of strip is displayed for users.
The common ways are as follows:
1. The progress bar of the timer (fake) <script Type = Text/Javascript> $ (Function () {var loading = '<div class = loading> <div class = pic> </div> </div>'; $ (body). g); setInterval (function () {$ (. Loading). Fadeout ();}, 3000);}); </script> 2. Real acquisition content, realize the loading progress barTo load the progress bar according to the real content, two knowledge points are introduced below:
document.onReadyStateChange page loading status event changes
document.readystate returns the status of the current document
1. Uninitialized -not yet started loading
2. Loading -
3. Interactive -loaded, document and user can start interacting
4. Complete -loading complete
2.1. You can modify the code of the timer to: document.onReadyStateChange = Function () {if (documeted.readyState == Complete) {$ (. Loading) .Fadeout ();}} 2.2. Display the small animation of the progress bar into CSSRecommended website: https://preloaders.net/ This website has various small animations that indicate loaded loading
http://autoprefixer.github.io/ to add prefixes to CSS online
https://loading.io/ Progressive small animation
2.3: The progress is positioned in the head, as shown below:Note: This realization is not the real display of loading progress, but uses: the principle of code execution from top to bottom
In different positions of the code, change the width of the lines. At the end of the page, the width is 100%.
As shown below:
2.4 Get the progress bar for loading data in real timeCreate image objects: image object name = new image ();
Use: online event
Note: The src attribute must be written behind the onLoad, otherwise the program will make an error in IE
The above is all the contents of this article. I hope the content of this article will help everyone's learning or work ~ If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com!