爱彩乐十一选五

首頁 > 上網技巧 > 電腦小技巧 > 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提供的廣告

爱彩乐十一选五 华旭期货股票配资 福建36选7 万银鼎信配资 重庆快乐十分 股票行情分析方法 灵菲配资 篮球比分 深圳风采 黑龙江十一选五 盈配资 北单比分推荐app 荣立通配资 mba院校排名及学费 陕西十一选五 今日美国股票指数 每天股票涨跌的原理