Detailed explanation of web page loading progress bar (recommended)

(When a web page is loading, sometimes there is too much content and it keeps loading and waiting. At this time, the web page displays white and does not show anything, which gives the user a very bad experience. Therefore, generally before the web page is loaded successfully, it will be displayed to the user in the form of a progress bar. Let the user see the animation and know that the web page is loading)

The common methods are as follows:

1. Timer progress bar (fake)

<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. Really obtain the content and realize the loading progress bar

To load the progress bar according to the real content, two knowledge points are introduced below:

document.onreadystatechange Event when the page loading state changes
document.readyState returns the current document status
1. uninitialized - not yet loaded
2. loading
3. interactive - loaded, the document and the user can start to interact
4. complete - loading completed

2.1. The above timer code can be modified to:

document.onreadystatechange=function(){ 
         if(document.readyState=="complete"){ 
                  $(".loading").fadeOut(); 
         } 
}

2.2. Turn the progress bar into a small CSS animation for display

Recommended website: https://preloaders.net/ This website has various small animations indicating loading

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

https://loading.io/ Progress bar animation

2.3: Position the progress of the head, as shown below:

Note: This implementation does not actually display the loading progress, but uses the principle of executing code from top to bottom to change the width of the line at different locations in the code, and makes the width 100% at the end of the page.

As shown below:

2.4 Get the progress bar of loading data in real time

Create an image object: image object name = new Image();
Use the onload event. Note: The src attribute must be written after onload, otherwise the program will fail in IE.

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support of 123WORDPRESS.COM!