js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

这里提供一个基于JavaScript实现的页面加载等待效果，其核心是利用了浏览器window对象的load事件和document对象的DOMContentLoaded事件。

1. 首先，在HTML文件中加入CSS，用来定义loading提示效果的样式：

.loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
}

.loading img {
    width: 100px;
}

1. 接着，在HTML文件中加入loading提示效果的HTML结构：

<div class="loading">
    <img src="loading.gif" alt="loading">
</div>

其中，loading.gif是一个加载动画的图片。

1. 然后，在JavaScript文件中编写loading提示效果的实现逻辑：

window.addEventListener(
    "load", // 用window对象的load事件
    function() {
        var loading = document.querySelector(".loading");
        loading.parentNode.removeChild(loading);
        // 加载完毕后，将loading提示效果的节点删除
    }
);

在这里，我们使用window对象的load事件，因为这表示当所有的页面、图片、样式、JavaScript等资源都加载完毕后就会触发这个事件。

1. 最后，为了处理太慢的网络或其他原因导致页面不加载的情况，我们可以利用document对象的DOMContentLoaded事件来附加loading提示。比如：

document.addEventListener(
    "DOMContentLoaded", // 用document对象的DOMContentLoaded事件
    function() {
        var loading = document.querySelector(".loading");
        if (loading) {
            loading.parentNode.removeChild(loading);
            // 加载完毕后，将loading提示效果的节点删除
        }
    }
);

在这里，我们使用document对象的DOMContentLoaded事件，它表示当HTML文档结构创建完毕后就会触发这个事件。

示例说明：

1. 示例一：如果我们仅仅使用window对象的load事件，并且加载一个特别慢的资源，比如一个非常大的图片，就会使得loading提示效果的显示时间过长。

2. 示例二：如果我们仅仅使用document对象的DOMContentLoaded事件，并且同时加载的资源比较多，就会使得我们的loading提示效果提前消失而用户会认为页面未加载完成。