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.
To get the progress bar on the demo, first introduce the jQuery framework (must be placed in the header of the page
Copy codeThe Code is as follows:
<Div id = "loading"> <div> </div>
CSS can be written as follows:
Copy codeThe Code is 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 give full play to it at will. Based on your understanding of Figure 2, place the following in the appropriate positions of each part of the template:
Copy codeThe Code is as follows:
<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:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ ("# Loading"). fadeOut ()
</Script>
Used to hide the progress bar after loading.
