Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

JS implements loading progress bar when loading page

高洛峰
Release： 2016-12-16 16:53:13
Original
1965 people have browsed it

JS implements the loading progress bar when the page is loaded

How to implement loading when the page is loaded

The loading implementation probably means this. First, hide the content to be displayed, first display the loading text or pictures, and then add the content after the document is loaded. Just show it and hide the loading.

I used jquery here, it doesn’t matter whether I use it or not. 

<html> 
<head> 
<script language="javascript" type="text/javascript" src="jquery-1.6.1.js">
</script> 
/** * 页面加载完成后显示页面 */ 
function showPage(){ $(&#39;#divPageLoading&#39;).remove(); 
$(&#39;#divPageBody&#39;).show(); } 
</head>
 <body onload="showPage();"> 
 <div id="divPageLoading"> 
 <img src="pageloading.gif" style="width:120px;height:120px;position:absolute;left:45%;top:40%;"/> 
 </div>
  <div id="divPageBody" style="display:none;"> …… 
 </div> 
 </body> 
 </html>
Copy after login



For more related articles on JS implementation of loading progress bar when loading pages, please pay attention to the PHP Chinese website!

Related labels：
JS进度条
source：php.cn
Previous article：JS implements page jump effects with progress bar Next article：js send email
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...
From 2024-04-04 16:45:25
0
1
330
When getting data from multiple tables, how to query based on entries in the table in SQL grouping I have two tables click 2.ride click table id | time ride table id | timestamp I want to g...
From 2024-04-04 08:58:17
0
1
319
Use methods from apply To find the maximum value of an array, a simple way is Math.max.apply(null,myArray) Howeve...
From 2024-04-03 21:41:46
0
2
278
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template