(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 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(); 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
Table of contents Preface Do not use strings to s...
This article describes how to implement coexisten...
Table of contents Preface - Vue Routing 1. The mo...
There are two types of scheduled tasks in Linux s...
The transaction log records the operations on the...
When making a new version of the configuration in...
1. Download the MySQL 5.7 installation package fr...
In daily maintenance, threads are often blocked, ...
Basic Concepts Absolute positioning: An element b...
1. Function: xargs can convert the data separated...
Due to work reasons, it is often not possible to ...
After the previous two chapters, do you have a ne...
Preface Since I needed to install Zookeeper durin...
Table of contents 1. What is copy_{to,from}_user(...
This article shares the specific code of JS to im...