[div id="divLoading" style="border:3px blue solid;background-position:absolute;top:-50px;left:350px;width:250px;height:50px;z-order=0"] [img src="http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/7.gif" style="vertical-align:middle;padding:6px"/] 網頁載入中,請稍候... [/div] |
基本結構就是用一個區域(div,division) 把圖形和載入中的文字包在一起,因為是放在第一個自由欄位裡,所以會在很早的時間裡就執行到而顯示在自由欄位上方50像素的位置(top: -50px)。因為這段HTML 是放在第一個自由欄位裡,自由欄位的左上角就是座標 (0, 0),要將此區域向上移動就是把底端用負值即可,此例中我把位置向上移了50個像素(-50px)。
類似AJAX的「載入中」圖形在網路上可以找到不少,其中AJAXLoad是一個能自行設定的圖形產生網頁,可依需求指定圖形的樣式 與顏色等;如果您懶得去找或用產生器的話,以下是一些我上載好的:
最後在任何一個自由欄位裡設定window.onload事件,在此事件裡把顯示出來的區域(divLoading)的顯示樣式變成 "none",則「載入中」的框框就消失了。
[script] function init( ) { // .... 其他指令 _oTag = document.getElementById("divLoading"); _oTag.style.display = "none"; // hide it. } if (window.attachEvent) { window.attachEvent('onload', init); } else { window.addEventListener('load', init, false); } [/script] |
出處
沒有留言:
張貼留言