如何在网页加载前显示加载中或loading样式？

最近做项目，发现偶尔页面加载会相对慢一点！为了更友好的交互，需要在页面加载完成前显示一个加载中的状态！

经一番百度，搜到了还不错的代码，下面我被代码贴出来，并教大家怎么用和自定义样式吧！

本插件的优势：

采用原生js代码，无需加载jquery！速度更快！

可自定义动画，方便针对不同系统更改样式！

/*******************************************
 *
 * 创建人：韩宇 （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 = '

	
	

		页面加载中，请等待...
	


';
//呈现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);
    }
}

=======================================

代码直达链接  http://micuer.com/static/loading.js

如上，是全部代码！我们只需将其保存成js问价即可

如图：

然后再页面的head前引用下就可以了

以上就是使用教程
==============================================

下面来说说如何自定义样式

代码中的

_LoadingHtml 是所有样式！我们要自定义样式的话，可以先在html中将样式写好，在替换到 _LoadingHtml 上即可！

注意：写的样式中请尽量使用""作为分割，因为js中是以‘’分割的！避免冲突

也可以引入动态的图片！具体看大家针对的项目和美工的审美了！