(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
Preface Forgotten passwords are a problem we ofte...
After I published my last article “Zen Coding: A Q...
1. Performance schema: Introduction In MySQL 5.7,...
Table of contents 1. Anti-shake 2. Throttling 3. ...
Get the Dockerfile from the Docker image docker h...
Solution function mergeImgs(list) { const imgDom ...
Table of contents 1. Introduction to v-slot 2. An...
<template> <div id="root"> ...
Here are a few ways to remove it: Add the link dir...
The display without the effect picture is just em...
MySQL is a powerful open source database. With th...
<br />It has been no more than two years sin...
Rendering After looking up relevant information o...
CSS Viewport units have been around for the past ...
Recently, I used vuethink in my project, which in...