Detailed explanation of web page loading progress bar (recommended)

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!

<<:  JavaScript web page entry-level development detailed explanation

>>:  A brief analysis of MySQL cardinality statistics

Recommend

MySQL/MariaDB Root Password Reset Tutorial

Preface Forgotten passwords are a problem we ofte...

How to use Zen coding in Dreamweaver

After I published my last article “Zen Coding: A Q...

Difference and implementation of JavaScript anti-shake and throttling

Table of contents 1. Anti-shake 2. Throttling 3. ...

How to add docker port and get dockerfile

Get the Dockerfile from the Docker image docker h...

js uses Canvas to merge multiple pictures into one implementation code

Solution function mergeImgs(list) { const imgDom ...

Vue3 slot usage summary

Table of contents 1. Introduction to v-slot 2. An...

Detailed explanation of Vue's TodoList case

<template> <div id="root"> ...

Several ways to remove the dotted box that appears when clicking a link

Here are a few ways to remove it: Add the link dir...

Example code of vue + element ui to realize player function

The display without the effect picture is just em...

Share 101 MySQL debugging and optimization tips

MySQL is a powerful open source database. With th...

The past two years with user experience

<br />It has been no more than two years sin...

CSS Viewport Units for Fast Layout

CSS Viewport units have been around for the past ...