js实现页面loading效果

废话不多说，直接上代码

//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="display: none; "><div id="over" style=" position: fixed;top: 0;left: 0; width: 100%;height: 100%; background-color: #f5f5f5;opacity:0.5;z-index: 1000;"></div><div id="layout" style="position: fixed;top: 40%; left: 40%;width: 20%; height: 20%;  z-index: 1001;text-align:center;"><img src="/js/plugins/layer/skin/default/loading-0.gif" /></div></div>';
//呈现loading效果
document.write(_LoadingHtml);
 
//移除loading效果
function completeLoading() {  
    document.getElementById("loadingDiv").style.display="none";
}
//展示loading效果
function showLoading()
{
document.getElementById("loadingDiv").style.display="block";
}

引入js后调用方法如下：

showLoading()
//进行业务逻辑的处理
completeLoading()

实现效果如下：

最后更新于 2020年4月1日