js实现页面loading效果

最新推荐文章于 2025-03-14 10:16:59 发布

卓月

最新推荐文章于 2025-03-14 10:16:59 发布

阅读量3w

点赞数 4

分类专栏： js

本文链接：https://blog.csdn.net/zhuoyue008/article/details/80206497

版权

js 专栏收录该内容

2 篇文章

订阅专栏

废话不多说，直接上代码

//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="display: none; "><div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background-color: #f5f5f5;opacity:0.5;z-index: 1000;"></div><div id="layout" style="position: absolute;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()

实现效果如下：

源码下载