爱彩乐十一选五

首頁 > 上網技巧 > 電腦小技巧 > html頁面加載好再進入網站功能實現

html頁面加載好再進入網站功能實現

時間:2019-10-11 16:36 作者:QQ地帶 我要評論

css代碼:
 
#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000}
#loadingDiv div{position:absolute;width:auto;height:105px;padding-left:215px;background:#fff url(../images/loading.gif) no-repeat center center/50px 50px}
js代碼:
 
var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;
        //計算loading框距離頂部和左部的距離(loading框的寬度為215px,高度為61px)
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
        _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在頁面未加載完畢之前顯示的loading Html自定義內容
var _LoadingHtml = '<div id="loadingDiv" style="height:' + _PageHeight + 'px;"><div style="left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px;"></div></div>';
//呈現loading效果
document.write(_LoadingHtml);
//監聽加載狀態改變
document.onreadystatechange = completeLoading;
//加載狀態為complete時移除loading效果
function completeLoading() {
        if (document.readyState == "complete") {
                var loadingMask = document.getElementById('loadingDiv');
                loadingMask.parentNode.removeChild(loadingMask);
        }
}
就是如此簡單,趕快試試吧!

標簽: html
頂一下
(0)
0%
踩一下
(0)
0%

Google提供的廣告

爱彩乐十一选五 江苏吴中股票行情 cf手游跳跳乐辅助器 二人麻将单机版 甘肃快3遗漏 大话西游最赚钱职业 通比牛牛亿元赌博案 重庆时时彩开奖公告 恒大彩票官方网站84847 重庆时时彩官方平台 一千本金怎么倍投稳赚 波克捕鱼礼包码 干小姐赚钱了不想干了 福彩三d最准确的技巧 重庆老时时个位技巧 3d走势图带连线 " 股票配资排名-选杨方配资给力