Page loading entries are generally used by everyone. Its principle is very simple: place a text or image loading state in the page header, and load a piece of JS at the end of the page to hide it, that is, the simple loading state bar implemented based on the loading sequence of the browser.
Demonstrate the loading sequence of traditional WordPress templates in the browser. The appearance and disappearance of loading entries are distributed at the beginning and end.
If we place multiple JavaScript codes in different locations on the page, and each JS is used to gradually increase the width of the loading entry, this loading entry will undoubtedly be more practical. To some extent, it relieves the boring feeling of visitors waiting for loading, and objectively reflects the page loading progress. If you use jquery's built-in animation effects, they are perfectly comparable to those of the browser's built-in status bar.
Let's take a look at the demo:Address.
Code
</ Head >
< Body >
< NoScript > Your browser does not support Javascript </ NoScript >
< Div ID = "Loading" > < Div > </ Div > </ Div >
< Script Type = "Text/JavaScript" > $ ( " # Loading Div " ). Animate ({width: " 16px " }). Text ( " 16% " ) </ Script >
< Script Type = "Text/JavaScript" > SetTimeout ( Function () {$ ( " # Loading Div " ). Animate ({width: " 34px " }). Text ( " 34% " )}, 500 ) </ Script >
< Script Type = "Text/JavaScript" > SetTimeout ( Function () {$ ( " # Loading Div " ). Animate ({width: " 67px " }). Text ( " 67% " )}, 1000 ) </ Script >
< Script Type = "Text/JavaScript" > SetTimeout ( Function () {$ ( " # Loading Div " ). Animate ({width: " 82px " }). Text ( " 82% " )}, 1500 ) </ Script >
< Script Type = "Text/JavaScript" > SetTimeout ( Function () {$ ( " # Loading Div " ). Animate ({width: " 100px " }). Text ( " 100% " )}, 2000 ) </ Script >
< Script Type = "Text/JavaScript" > SetTimeout ( Function () {$ ( " # Loading " ). Hide ( 500 )}, 3000 ) </ Script >
</ Body >
</ Html >
To obtain the progress bar on the demo,First, Introduce the jquery framework (must be placed in the page header<Head>Label ). Then place the tag at the starting position of the <body> tag:
<Div id = "loading"> <div> </div>
CSS can be written as follows:
# Loading {
Width: 100px;
Height: 20px;
Background: # a0db0e;
Padding: 5px;
Position: fixed;
Left: 0;
Top: 0;
}
# Loading Div {
Width: 1px;
Height: 20px;
Background: # f1ff4d;
}
The preparations are now ready.
Next, Please try it out at will. Based on your understanding of Figure 2, place the following in the appropriate positions of each part of the template:
<SCRIPT type = "text/JavaScript">
$ ("# Loading Div"). animate ({width :"16px"})
</SCRIPT>
The red value should gradually increase with the loading order until footer. php. In addition, do not forget to put it at the end of footer. php:
<SCRIPT type = "text/JavaScript">
$ ("# Loading"). fadeout ()
</SCRIPT>
Used to hide the progress bar after loading.
From: http://ishawn.net/tips/loading-status-bar.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
