html加载中效果,JS实现页面加载完毕之前loading提示效果

一、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 = ‘

页面加载中，请等待…

’;

//呈现loading效果

document.write(_LoadingHtml);

//window.onload = function () {

//    var loadingMask = document.getElementById(‘loadingDiv’);

//    loadingMask.parentNode.removeChild(loadingMask);

//};

//监听加载状态改变

document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果

function completeLoading() {

if (document.readyState == “complete”) {

var loadingMask = document.getElementById(‘loadingDiv’);

loadingMask.parentNode.removeChild(loadingMask);

}

}

二、效果：

说明：

将此段js代码放入

最后即可；

其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找(网上很多的)。

Demo下载地址：