最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何显示页面加载 div 直到页面加载完成?

    如何显示页面加载 div 直到页面加载完成?

    与其在加载页面时显示整个白屏或黑屏,不如显示加载指示器,这也改善了应用程序的用户体验。

    现在,有一些库可以显示加载指示器。但是,我们可以使用 HTML 和 CSS 来创建自定义的加载指示器 div。

    在本教程中,我们将使用 HTML、CSS 和 JavaScript 来显示页面加载 div,直到页面加载完成

    使用onreadystatechange事件在加载页面时显示加载指示器

    在 JavaScript 中,只要网页状态发生变化,就会触发 onreadystatechange 事件。第一个状态是“交互”,这意味着网页正在交互并已开始加载。第二阶段为“完成”,即网页加载成功。

    因此,我们可以在其他所有状态下隐藏正文并显示加载指示器,而在“完成”状态下,我们可以隐藏加载指示器并显示正文。

    语法

    用户可以按照以下语法根据文档的状态显示和隐藏加载指示器。

    document.onreadystatechange = function () {
       if (document.readyState !== "complete") {
          
          // show loading indicator and hide body
       } else {
          
          // show body, and hide loading indicator
       }
    };
    

    在上面的语法中,每当文档的状态发生变化时,我们都会调用该函数。它检查状态是否“完成”,然后隐藏加载指示器并显示正文。

    示例

    在下面的示例中,我们使用“loading_indicator”div 创建了 div,并应用了一些 CSS 使其成为圆形加载指示器。

    在 JavaScript 中,我们使用 onreadystatechange 事件。每当状态发生变化时,就会执行该函数。在函数中,我们使用文档的“readyState”属性来获取文档的当前状态。如果文档的当前状态等于“完整”,我们可以访问并隐藏加载指示器并显示整个文档正文。否则,我们可以显示加载指示器并隐藏文档正文。

    <html>
    <head>
       <style>
          #loading_indicator {
             position: absolute;
             top: 0;
             bottom: 0;
             left: 0;
             right: 0;
             margin: auto;
             border: 10px solid grey;
             border-radius: 50%;
             border-top: 10px solid blue;
             width: 100px;
             height: 100px;
             animation: spinIndicator 1s linear infinite;
          }
          @keyframes spinIndicator {
             100% {
                transform: rotate(360deg);
             }
          }
       </style>
    </head>
    <body>
       <h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
       <div id = "loading_indicator"> </div>
       <h3> Page Loaded successfully.</h3>
       <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
       <script>
          document.onreadystatechange = function () {
             if (document.readyState !== "complete") {
                document.querySelector("body").style.visibility = "hidden";
                document.getElementById("loading_indicator").style.visibility = "visible";
             } else {
                setTimeout(() => {
                   document.getElementById("loading_indicator").style.display ="none";
                   document.querySelector("body").style.visibility = "visible";
                }, 3000)
             }
          };
       </script>
    </body>
    </html>
    

    示例

    在下面的示例中,我们使用 jQuery 在加载页面时显示加载指示器。我们为文档正文添加了 HTML 和 CSS。

    在 JQuery 中,我们使用append() 方法将加载指示符附加到文档正文中。之后,我们使用“load”事件来检查页面是否已加载,并基于此从网页中删除了加载指示器。

    <html>
    <head>
       <style>
          #indicator {
             position: absolute;
             top: 0;
             bottom: 0;
             left: 0;
             right: 0; 
             margin: auto;
             border: 10px solid grey;
             border-radius: 50%;
             border-top: 10px solid red;
             width: 100px;
             height: 100px;
             animation: spin 1s linear infinite;
          }
          @keyframes spin {
             0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
             }
             100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
             }
          }
       </style>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
       <h2>Using the <i> JQuery load event </i> to show page loading div in JavaScript.</h2>
       <h3>Page Loaded successfully.</h3>
       <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
       <script>
          $('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
          $(window).on('load', function () {
             setTimeout(removeLoader, 2000);
          });
          function removeLoader() {
             $("#indicator").fadeOut(1000, function () {
                $("#indicator").remove();
             });
          }
       </script>
    </body>
    </html>
    

    我们学会了使用 JavaScript 和 jQuery 在页面加载时显示加载指示器。在第一个示例中,我们使用 JavaScript 的 onreadystatechange 事件根据页面是否加载来显示和隐藏加载指示器。

    在第二个例子中,我们使用JQuery的load事件来显示和隐藏加载指示器

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何显示页面加载 div 直到页面加载完成?
    • 5会员总数(位)
    • 22683资源总数(个)
    • 780本周发布(个)
    • 22 今日发布(个)
    • 179稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情