search

Home  >  Article  >  Web Front-end  >  JS implements loading progress bar when loading page

JS implements loading progress bar when loading page

高洛峰
高洛峰Original
2016-12-16 16:53:131965browse

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>



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

Statement：
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
Previous article：JS implements page jump effects with progress barNext article：JS implements page jump effects with progress bar

Related articles

See more