正在載入中......loading頁面的幾種方法
網頁載入過程中提示“載入中…”，特別是使用動畫效果，可以一個“等待”的溫馨提示，使用者體驗很不錯。下面介紹幾種方法。
第一種：
原理就是,在網頁載入時在頁面最中間打入一個層上面顯示,"網頁正在載入中...."當網頁下載完畢,,用JS關閉這個層......。
先在首頁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末尾加入
<script>
closeDiv()
</script>
這種簡單明瞭，不過效果可能不會很精確。
第二種：
就是利用一個百分比來連續加入一組“||”字串，然後達到 100% 之後執行一次 self.location.href 跳轉。
下面是實現程式碼：
<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();