Detailed explanation of webpage loading progress (recommended)

Author：Eve Cole Update Time：2025-03-07 06:16:01

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

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

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

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