JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫(huà)的代碼
更新時(shí)間:2012年10月11日 23:07:00 作者:
JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫(huà)的代碼廢話(huà)少說(shuō),直接貼代碼!有注釋
復(fù)制代碼 代碼如下:
function initialize() {
addcloud(); //為頁(yè)面添加遮罩
document.onreadystatechange = subSomething; //監(jiān)聽(tīng)加載狀態(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軸最大,用戶(hù)點(diǎn)擊頁(yè)面任何東西都不會(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)畫(huà)-
}
function removecloud() {
$( "#loadingDiv").remove();
$( "#bgDiv").remove();
}
function subSomething() {
if (document.readyState == "complete" ) //當(dāng)頁(yè)面加載完畢移除頁(yè)面遮罩,移除loading動(dòng)畫(huà)-
{
removecloud();
}
}
相關(guān)文章
純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+)
這篇文章主要介紹了純javascript前端實(shí)現(xiàn)base64圖片下載(兼容IE10+),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09bootstrap監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽(tīng)滾動(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彈出頁(yè)面后,提交表單總是彈出一個(gè)新窗口
用showModalDialog彈出頁(yè)面后,提交表單總是彈出一個(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-05JavaScript的防抖和節(jié)流一起來(lái)了解下
這篇文章主要為大家詳細(xì)介紹了JavaScript的防抖和節(jié)流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03