網頁加載過程當中提示「載入中…」,特別是使用動畫效果,能夠一個「等待」的舒適提示,用戶體驗很不錯。下面介紹幾種方法。html
第一種: 前端
原理就是,在網頁載入時在頁面最中間打入一個層上面顯示,"網頁正在載入中...."當網頁下載完畢,,用JS關閉這個層......。java
先在首頁HTML最上面...任意位置都行..加入瀏覽器
<div id=loading style="position:absolute; left:423px; top:261px; width:227px; height:20px; z-index:1"> 正在載入中,請稍等.....</div> <script> function closeDiv() { document.getElementById('loading').style.visibility='hidden'; } </script>
而後在HTML末尾加入
ide
<script>
closeDiv()
</script>
這種簡單明瞭,不過效果可能不會很精確。動畫
第二種:ui
就是利用一個百分比來連續加入一組「||」字符串,而後達到 100% 以後執行一次 self.location.href 跳轉。url
下面是實現代碼:spa
<html> <head> <title>正在載入...</title> <meta http-equiv="Content-Type" c> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"> <table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%"> <tr> <form name=loading> <td align=center> <p><font color=gray>正在載入首頁,請稍候.......</font></p> <p> <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:gray; background-color:white; padding:0px; border-style:none;"> <br> <input type=text name=percent size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none;"> <script>var bar = 0 var line = "||" var amount ="||" count() function count(){ bar= bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"%" if (bar<99) {setTimeout("count()",100);} else {window.location = "http://www.XXXX.com/";} } </script> </p> </td> </form> </tr> </table> </body> </html>
可是這種辦法跳轉過去再次讀取頁面而這個效果也就起不到任何預載入的功能,只能說是以假亂真罷了。設計
第三種:
利用DOM模型的document.all 來 document.layers這兩個對象來作判斷頁面是否加載完畢從而實現層的現實和隱藏。順便說明下document.all 和 document.layers。
document.all是IE瀏覽器所具備的對象集合,通常用if(document.all)來判斷是不是IE瀏覽器,這個集合表明document對象下全部元素;
document.layers是網景Netscape瀏覽器所具備的對象集合,這個集合表明document對象下全部的layer(層)。
下面是實現代碼:
<html> <head> <title>Loading.....</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript"> <!-- var url = 'http://www.XXXX.com'; //--> </script> </head> <body scroll="no" bgcolor="#FFFFFF" onLoad="location.href = url"> <div align="center"> <br><br><br><br><br><br><br> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FF6600">正在載入XXXX....</font> </p> <p> <script> <!-- if (document.layers) document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>'); else if (document.all || document.getElementById) document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>'); else location.href = url; //--> </script> </p> </div> </body> </html>
第四種:
利用window.onload 是在頁面徹底讀取完畢才執行的特性。
首先在咱們在要使用載入條的 HTML 頁面設計一個 ID 爲 LoadingBar 的層(此層的樣式能夠隨便設置,還能夠加入圖片在其中。總之就是隻要 ID 符合條件,其它均可以隨便
javascipt代碼:
function initPage() { var objLoading = document.getElementById("LoadingBar"); if (objLoading != null) { objLoading.style.display = "none"; } }
html代碼:
<div id="LoadingBar">正在載入,請稍候……</div>
這個語句最好是放在頁的最前端,也就是緊跟 <body> 標籤的下面一行,這樣才能確保在讀頁面的時候最早顯示這一層。最後,要在頭部加上一段 JavaScript:window.onload = initPage();