JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
更新時(shí)間:2012年10月11日 23:07:00 作者:
JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼廢話少說,直接貼代碼!有注釋
復(fù)制代碼 代碼如下:
function initialize() {
addcloud(); //為頁面添加遮罩
document.onreadystatechange = subSomething; //監(jiān)聽加載狀態(tài)改變
}
function addcloud() {
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" );
bgObj.setAttribute( 'id', 'bgDiv' );
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#000000";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
bgObj.style.opacity = "0.5";
bgObj.style.left = "0";
bgObj.style.width = bodyWidth + "px";
bgObj.style.height = bodyHeight + "px";
bgObj.style.zIndex = "10000"; //設(shè)置它的zindex屬性,讓這個(gè)div在z軸最大,用戶點(diǎn)擊頁面任何東西都不會(huì)有反應(yīng)|
document.body.appendChild(bgObj); //添加遮罩
var loadingObj = document.createElement("div");
loadingObj.setAttribute( 'id', 'loadingDiv' );
loadingObj.style.position = "absolute";
loadingObj.style.top = bodyHeight / 2 - 32 + "px";
loadingObj.style.left = bodyWidth / 2 + "px";
loadingObj.style.background = "url(../img/loading.gif)" ;
loadingObj.style.width = "32px";
loadingObj.style.height = "32px";
loadingObj.style.zIndex = "10000";
document.body.appendChild(loadingObj); //添加loading動(dòng)畫-
}
function removecloud() {
$( "#loadingDiv").remove();
$( "#bgDiv").remove();
}
function subSomething() {
if (document.readyState == "complete" ) //當(dāng)頁面加載完畢移除頁面遮罩,移除loading動(dòng)畫-
{
removecloud();
}
}
相關(guān)文章
純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+)
這篇文章主要介紹了純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11javascript實(shí)現(xiàn)網(wǎng)站加入收藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)站加入收藏功能的相關(guān)資料,需要的朋友可以參考下2015-12-12直接在JS里創(chuàng)建JSON數(shù)據(jù)然后遍歷使用
本節(jié)為大家講解下直接在JS里創(chuàng)建JSON數(shù)據(jù),然后遍歷使用,需要的朋友可以參考下2014-07-07用showModalDialog彈出頁面后,提交表單總是彈出一個(gè)新窗口
用showModalDialog彈出頁面后,提交表單總是彈出一個(gè)新窗口,其實(shí)解決方法很簡(jiǎn)單如下。2009-07-07JavaScript實(shí)現(xiàn)省市縣三級(jí)級(jí)聯(lián)特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)省市縣三級(jí)級(jí)聯(lián)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05