隨著部落格小玩意的推陳出新,部落客的部落格裝飾也越來越琳瑯滿目,但是,相對的,網頁載入的速度也變慢許多,如果能在部落格上添加一段文字或圖示顯示「網頁正在載入中」,提醒訪客稍待片刻,除此之外,也讓網誌看起來更生動。

以下內容整理自簡睿隨筆「網頁載入中,請稍候‧‧‧」的簡單作法,另外感謝溫柔貓告訴我這麼一個好地方:

首先,請在網誌描述或自訂欄位的地方加入下面的語法:

<div id="divLoading">
/* 這裡加入你想表示網頁載入的文字或圖片 */
</div>
<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>

接著,針對你加入的東西做樣式設定,例如,以我的為例設定如下,把這段文字加入你的CSS樣式表中:

#divLoading {
position:relative; /* 顯示位置 */
left:16px;
top:175px;
color:#eeeeee; /* 字體顏色 */
font-size:14px; /* 字體大小 */
letter-spacing:2px;
vertical-align:middle;
}

如此一來,就大功告成囉!

展示結果可以看我的Banner左下角的顯示,重新整理一遍就看的到囉!網頁載入完畢它就會消失了。

另外,關於載入圖片的取得,可以從Ajaxload的圖片產生器取得。

iamsiaopo 發表在 痞客邦 留言(0) 人氣()