页面加载loading效果_米醋屋个人技术博客

很早之前就写过这样的插件，由于博客的升级，导致以前的文章访问格式错乱，这里重新整理、分享。
```

/*******************************************
 *
 * 创建人：韩宇 （571031767@qq.com）
 * 创建时间：2018年5月
 * 创建说明：Base=>页面加载（loading）效果
 *
 * 修改人：
 * 修改时间：
 * 修改说明：
 *
 *********************************************/

//获取浏览器页面可见高度和宽度
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="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFF;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background-image: url("http://news.online.sh.cn/news/gb/content/attachement/jpg/site1/20180808/IMG90b11c9b88aa4836960531.jpg"); border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFF;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div class="img_wrap" style="margin-left: 50%; margin-top: 200px;"><img src="http://micuer.com/data/upload/pics/5b6a9b94de9be.gif" alt=""></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);
    }
}
```

注:原创不易,转载请注明出处( http://www.micuu.com/new/1851.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。