js页面加载实现loading提示效果

最新推荐文章于 2024-07-25 16:30:42 发布

蓝关故人

最新推荐文章于 2024-07-25 16:30:42 发布

阅读量6.8k

点赞数

分类专栏： JavaScript 文章标签： Loading JavaScript

本文链接：https://blog.csdn.net/weixin_39734304/article/details/99666015

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

由于页面在加载过程中请求了很多资源，导致打开过慢，且页面无提示，对用户不友好，测试人员希望增加loading效果。

参考如下步骤可行。

实际项目展示动态loading图有自有的方法，不便贴代码，以下用展示简单语句进行示例：

//在页面未加载完毕之前显示的loading效果

var _LoadingHtml = '正在加载中，请稍后。。。';

//呈现loading效果

document.write(_LoadingHtml);

//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

----------------------------------

部分框架支持：

Nf.shouTask();//展示动图效果

Nf.hideTask();//隐藏动图效果

可以替换上图的提示语