JS實作頁面載入時帶loading進度條-js教程-PHP中文網

首頁

web前端

js教程

JS實作頁面載入時帶loading進度條

Dec 16, 2016 pm 04:53 PM

JS實作頁面載入時帶loading進度條

頁面載入時loading實作方法

loading實作大概就這個意思，先將要顯示的內容隱藏，先顯示loading文字或圖片什麼的，然後文件載入完畢後將內容顯示出來，loading隱藏掉就好了。

這裡我用到了jquery，用不用無所謂。

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

登入後複製

更多JS實作頁面載入時帶loading進度條相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn