简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

JS implements loading progress bar when loading page

高洛峰
Release： 2016-12-16 16:53:13
Original
1924 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
How can I set the height of an outer div to always be equal to the height of a specific inner div? I have an outer div that contains three inner divs. I want the leftmost inner div to alway...
From 2023-11-07 13:59:30
0
2
314
Please apply the appropriate transformation first to resolve vite Internal Server Error: Missing code generation node for element /if/for node So yesterday I was working on a project and as I was getting ready to quit because I was d...
From 2023-10-26 14:52:04
0
2
211
Align decimal points of numbers in table with pseudo "center" alignment appearing in cells I want a table with a column of decimal numbers, with different lengths before and after t...
From 2023-10-24 13:01:47
0
1
266
Convert JavaScript regular expression to PHP I know this question has been asked about a dozen times, but technically it's not a scam (...
From 2023-10-23 22:58:33
0
2
394
将Including array as a dependency in useEffect There is some data coming in from the long poll every 5 seconds and I want my component to...
From 2023-10-17 18:50:23
0
2
207
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！