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

Best Practices Guide for Storing Dates in MySQL

Table of contents Preface Do not use strings to s...

In-depth understanding of Vue-cli4 routing configuration

Table of contents Preface - Vue Routing 1. The mo...

How to customize at and cron scheduled tasks in Linux

There are two types of scheduled tasks in Linux s...

How to shrink the log file in MYSQL SERVER

The transaction log records the operations on the...

Solution to the problem that the Vue page image does not display

When making a new version of the configuration in...

Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7

1. Download the MySQL 5.7 installation package fr...

In-depth analysis of MySQL lock blocking

In daily maintenance, threads are often blocked, ...

Use of Linux xargs command

1. Function: xargs can convert the data separated...

Pure CSS3 to achieve mouse over button animation Part 2

After the previous two chapters, do you have a ne...

Detailed explanation on how to install MySQL database on Alibaba Cloud Server

Preface Since I needed to install Zookeeper durin...

Thoughts on copy_{to, from}_user() in the Linux kernel

Table of contents 1. What is copy_{to,from}_user(...

JS implements a simple brick-breaking pinball game

This article shares the specific code of JS to im...