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

有很多方法可以显示加载div，但我们为您找到了最优的解决方案，而且还是用纯粹的原生JavaScript实现。我们将使用document.readyState属性。当此属性的值改变时，document对象上会触发一个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事件会触发，我们的函数会执行。如果文档尚未加载完成，那么页面体应该对用户保持隐藏，只有加载器可见。一旦页面完全加载完成，我们将加载器的display设置为none，并将页面体设置为可见。

示例：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to show Page Loading div until
        the page has finished loading?
    </title>
 
    <style>
        #loader {
            border: 12px solid #f3f3f3;
            border-radius: 50%;
            border-top: 12px solid #444444;
            width: 70px;
            height: 70px;
            animation: spin 1s linear infinite;
        }
 
        .center {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
 
        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
 
<body>
    <div id="loader" class="center"></div>
    <h1>GeeksforGeeks</h1>
    <h2>A computer science portal for geeks</h2>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230723195619/GfG-Image.png"
        alt="GeeksforGeeks logo" />
         
    <script>
        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";
            }
        };
    </script>
</body>
 
</html>

要查看代码的运行情况，您需要按照以下简单的步骤进行：

步骤1： 将上面的示例代码复制并粘贴到文本编辑器中，并将其保存为.html扩展名。

步骤2： 打开您保存的.html文件，然后打开浏览器的开发者工具，转到网络选项卡，并将节流设置为Slow 3G。

以下是一个动态图示您如何操作：

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