如何在页面加载完成之前显示页面加载 div？

有很多方法可以显示加载div ，但我们已经为您找到了最优化的解决方案，而且在纯原生 JavaScript 中也是如此。我们将使用document.readyState属性。当此属性的值发生更改时，会在文档对象上触发readystatechange事件。

document.readyState属性可以返回这三个字符串值：

loading ：当文档仍在加载时。

interactive ：当文档完成加载但样式表、图像和框架等子资源仍在加载时。

complete ：当文档和所有子资源完成加载时。

让我们看一下 JavaScript 代码：

document.onreadystatechange = function() {
    if (document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
        document.querySelector("#loader").style.visibility = "visible";
    } else {
        document.querySelector("#loader").style.display = "none";
        document.querySelector("body").style.visibility = "visible";
    }
};

当document.readyState改变时， readystatechange事件触发并且我们的函数执行。如果文档还没有加载，那么 body 应该对用户隐藏，只有加载器应该是可见的。页面完全加载后，我们将加载程序的显示设置为无，并使正文可见。

例子：

  

    
    
    
    Loader Demo
    
        #loader {
            border: 12px solid #f3f3f3;
            border-radius: 50%;
            border-top: 12px solid #444444;
            width: 70px;
            height: 70px;
            animation: spin 1s linear infinite;
        }
          
        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
          
        .center {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    

  

    
    GeeksforGeeks
    A computer science portal for geeks
    
    
        document.onreadystatechange = function() {
            if (document.readyState !== "complete") {
                document.querySelector(
                  "body").style.visibility = "hidden";
                document.querySelector(
                  "#loader").style.visibility = "visible";
            } else {
                document.querySelector(
                  "#loader").style.display = "none";
                document.querySelector(
                  "body").style.visibility = "visible";
            }
        };
    

  

要查看实际代码，您需要执行以下简单步骤：
第 1 步：将上面的示例代码复制并粘贴到文本编辑器中，并以.html 扩展名保存。

第 2 步：打开您保存的.html文件，然后打开浏览器的开发人员工具，转到网络选项卡并将限制设置为慢 3G。这是一个 GIF，向您展示如何做到这一点：

在开发者工具中设置网络节流以降低 3G 速度

第 3 步：使用ctrl + f5重新加载页面。以下是最终输出的样子：

最终输出