Rumah > hujung hadapan web > tutorial js > JS实现页面加载时带loading进度条

JS实现页面加载时带loading进度条

高洛峰
Lepaskan: 2016-12-16 16:53:13
asal
1986 orang telah melayarinya

JS实现页面加载时带loading进度条

页面加载时loading实现方法

loading实现大概就这个意思,首先将要显示的内容隐藏,先显示loading文字或图片什么的,然后文档加载完毕后将内容显示出来,loading隐藏掉就好了。

这里我用到了jquery,用不用无所谓。

<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>
Salin selepas log masuk



更多JS实现页面加载时带loading进度条相关文章请关注PHP中文网!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan