利用Javascript+CSS讓Web Page在load時出現Loading...的圖示
有用過Gmail的人應該都會知道....
當打開Gmail頁面時,右上角會出現一塊"載入中..."
小弟去網路上找了一下資料...原來用javascript+css就可以做到了....
小弟用了一個範例介紹如何使用.....
PageLoading.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageLoading.aspx.cs" Inherits="PageLoading" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>PageLoading</title>
07 <style type="text/css">
08 #loading {
09 width: 200px;
10 height: 100px;
11 position: absolute;
12 left: 50%;
13 top: 50%;
14 margin-top: -50px;
15 margin-left: -100px;
16 text-align: center;
17 }
18 </style>
19
20 <script type="text/javascript" src="preLoadingMessage.js"></script>
21
22 </head>
23 <body>
24 <form id="form1" runat="server">
25 <div>
26 網頁內容
27 </div>
28 </form>
29 </body>
30 </html>
31
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>PageLoading</title>
07 <style type="text/css">
08 #loading {
09 width: 200px;
10 height: 100px;
11 position: absolute;
12 left: 50%;
13 top: 50%;
14 margin-top: -50px;
15 margin-left: -100px;
16 text-align: center;
17 }
18 </style>
19
20 <script type="text/javascript" src="preLoadingMessage.js"></script>
21
22 </head>
23 <body>
24 <form id="form1" runat="server">
25 <div>
26 網頁內容
27 </div>
28 </form>
29 </body>
30 </html>
31
preLoadingMessage.js
1 
document.write('<div id="loading">
2 <img src="/images/blog_blueshop_com_tw/hent/2232/o_ajax-loader.gif" /></div>
3
'); function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload
4
!= 'function') { window.onload = func; } else { window.onload = function() { if
5(oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { document.getElementById("loading").style.display="none";
6
});
document.write('<div id="loading">2
<img src="/images/blog_blueshop_com_tw/hent/2232/o_ajax-loader.gif" /></div>3
'); function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload
'); function addLoadEvent(func) 4
!= 'function') { window.onload = func; } else { window.onload = function() { if5
(oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { document.getElementById("loading").style.display="none";6
});
執行結果(以我的blog為例)：
參考來源：http://javascript.internet.com/css/pre-loading-message.html