个人中心
gpt4 book ai didi

javascript - 尝试使用加载器动画来购买我的网页一些时间来加载，但网页仍然只在动画之后和 block 中加载

转载 作者：太空宇宙 更新时间：2023-11-04 09:15:14 24 4
gpt4 key购买 nike

我正在尝试制作一个网站，该网站在开始时使用加载器动画来购买我网站的“批量”加载时间。我将加载器动画设置为 3 秒，我的 <body>要显示为隐藏的元素。但是，当 3 秒的加载器动画完成时，我的网站仍会分块加载。

下面列出的代码与我正在使用的代码完全相同，但是 <body>为了这个线程，被简化为一个简单的句子。我实际上正在使用带有图片、网站图标和其他内容的 html/css/js/bootstrap 模板。它不是一个很重的网站，但那里有大量的媒体。

Codepen link here 

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .cssload-container *, .cssload-container *:before, .cssload-container *:after{
        box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
    }

    .cssload-container {
        margin: auto;
        width: 68px;
        height: 29px;
        position: fixed; /* or absolute */
        top: 50%;
        left: 50%;
    }
    .cssload-container > div {
        float: left;
        background: rgb(185,108,255);
        height: 100%;
        width: 5px;
        margin-right: 1px;
        display: inline-block;
    }

    .cssload-container .cssload-shaft1 {
        animation-delay: 0.06s;
            -o-animation-delay: 0.06s;
            -ms-animation-delay: 0.06s;
            -webkit-animation-delay: 0.06s;
            -moz-animation-delay: 0.06s;
    }
    .cssload-container .cssload-shaft2 {
        animation-delay: 0.12s;
            -o-animation-delay: 0.12s;
            -ms-animation-delay: 0.12s;
            -webkit-animation-delay: 0.12s;
            -moz-animation-delay: 0.12s;
    }
    .cssload-container .cssload-shaft3 {
        animation-delay: 0.17s;
            -o-animation-delay: 0.17s;
            -ms-animation-delay: 0.17s;
            -webkit-animation-delay: 0.17s;
            -moz-animation-delay: 0.17s;
    }
    .cssload-container .cssload-shaft4 {
        animation-delay: 0.23s;
            -o-animation-delay: 0.23s;
            -ms-animation-delay: 0.23s;
            -webkit-animation-delay: 0.23s;
            -moz-animation-delay: 0.23s;
    }
    .cssload-container .cssload-shaft5 {
        animation-delay: 0.29s;
            -o-animation-delay: 0.29s;
            -ms-animation-delay: 0.29s;
            -webkit-animation-delay: 0.29s;
            -moz-animation-delay: 0.29s;
    }
    .cssload-container .cssload-shaft6 {
        animation-delay: 0.35s;
            -o-animation-delay: 0.35s;
            -ms-animation-delay: 0.35s;
            -webkit-animation-delay: 0.35s;
            -moz-animation-delay: 0.35s;
    }
    .cssload-container .cssload-shaft7 {
        animation-delay: 0.4s;
            -o-animation-delay: 0.4s;
            -ms-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
    }
    .cssload-container .cssload-shaft8 {
        animation-delay: 0.46s;
            -o-animation-delay: 0.46s;
            -ms-animation-delay: 0.46s;
            -webkit-animation-delay: 0.46s;
            -moz-animation-delay: 0.46s;
    }
    .cssload-container .cssload-shaft9 {
        animation-delay: 0.52s;
            -o-animation-delay: 0.52s;
            -ms-animation-delay: 0.52s;
            -webkit-animation-delay: 0.52s;
            -moz-animation-delay: 0.52s;
    }
    .cssload-container .cssload-shaft10 {
        animation-delay: 0.58s;
            -o-animation-delay: 0.58s;
            -ms-animation-delay: 0.58s;
            -webkit-animation-delay: 0.58s;
            -moz-animation-delay: 0.58s;
    }

    .cssload-container {
        height: 39px;
    }
    .cssload-container > div {
        position: relative;
        bottom: 0;
        margin-top: 34px;
        height: 5px;
        animation: cssload-wave 1.73s infinite ease-in-out;
            -o-animation: cssload-wave 1.73s infinite ease-in-out;
            -ms-animation: cssload-wave 1.73s infinite ease-in-out;
            -webkit-animation: cssload-wave 1.73s infinite ease-in-out;
            -moz-animation: cssload-wave 1.73s infinite ease-in-out;
    }
    .cssload-container .shaft1 {
        animation-delay: -1.73s;
            -o-animation-delay: -1.73s;
            -ms-animation-delay: -1.73s;
            -webkit-animation-delay: -1.73s;
            -moz-animation-delay: -1.73s;
    }
    .cssload-container .shaft2 {
        animation-delay: -1.61s;
            -o-animation-delay: -1.61s;
            -ms-animation-delay: -1.61s;
            -webkit-animation-delay: -1.61s;
            -moz-animation-delay: -1.61s;
    }
    .cssload-container .shaft3 {
        animation-delay: -1.5s;
            -o-animation-delay: -1.5s;
            -ms-animation-delay: -1.5s;
            -webkit-animation-delay: -1.5s;
            -moz-animation-delay: -1.5s;
    }
    .cssload-container .shaft4 {
        animation-delay: -1.38s;
            -o-animation-delay: -1.38s;
            -ms-animation-delay: -1.38s;
            -webkit-animation-delay: -1.38s;
            -moz-animation-delay: -1.38s;
    }
    .cssload-container .shaft5 {
        animation-delay: -1.27s;
            -o-animation-delay: -1.27s;
            -ms-animation-delay: -1.27s;
            -webkit-animation-delay: -1.27s;
            -moz-animation-delay: -1.27s;
    }
    .cssload-container .shaft6 {
        animation-delay: -1.15s;
            -o-animation-delay: -1.15s;
            -ms-animation-delay: -1.15s;
            -webkit-animation-delay: -1.15s;
            -moz-animation-delay: -1.15s;
    }
    .cssload-container .shaft7 {
        animation-delay: -1.04s;
            -o-animation-delay: -1.04s;
            -ms-animation-delay: -1.04s;
            -webkit-animation-delay: -1.04s;
            -moz-animation-delay: -1.04s;
    }
    .cssload-container .shaft8 {
        animation-delay: -0.92s;
            -o-animation-delay: -0.92s;
            -ms-animation-delay: -0.92s;
            -webkit-animation-delay: -0.92s;
            -moz-animation-delay: -0.92s;
    }
    .cssload-container .shaft9 {
        animation-delay: -0.81s;
            -o-animation-delay: -0.81s;
            -ms-animation-delay: -0.81s;
            -webkit-animation-delay: -0.81s;
            -moz-animation-delay: -0.81s;
    }
    .cssload-container .shaft10 {
        animation-delay: -0.69s;
            -o-animation-delay: -0.69s;
            -ms-animation-delay: -0.69s;
            -webkit-animation-delay: -0.69s;
            -moz-animation-delay: -0.69s;
    }
    .cssload-container .shaft11 {
        animation-delay: -0.58s;
            -o-animation-delay: -0.58s;
            -ms-animation-delay: -0.58s;
            -webkit-animation-delay: -0.58s;
            -moz-animation-delay: -0.58s;
    }



    @keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-o-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-ms-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-webkit-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-moz-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

h2 {
  position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
}
    </style>
    </head>
    <body onload="myFunction()" style="margin:0;">

    <div id="loader">
        <div class="cssload-container">
        <div class="cssload-shaft1"></div>
        <div class="cssload-shaft2"></div>
        <div class="cssload-shaft3"></div>
        <div class="cssload-shaft4"></div>
        <div class="cssload-shaft5"></div>
        <div class="cssload-shaft6"></div>
        <div class="cssload-shaft7"></div>
        <div class="cssload-shaft8"></div>
        <div class="cssload-shaft9"></div>
        <div class="cssload-shaft10"></div>
        </div>
    </div>
    </div>

    <div style="display:none;" id="myDiv" class="animate-bottom">
      <h2>Zing! If you're seeing this after the loader animation, it works!</h2>
    </div>

    <script>
    var myVar;

    function myFunction() {
        myVar = setTimeout(showPage, 3000);
    }

    function showPage() {
      document.getElementById("loader").style.display = "none";
      document.getElementById("myDiv").style.display = "inline";
    }
    </script>

    </body>
    </html>

最佳答案

无需猜测您的内容何时可供查看，您可以将事件处理程序附加到文档以监听 DOMContentLoaded，然后在其中调用您的 showPage() 函数.像这样:

document.addEventListener("DOMContentLoaded", function(event) { 
  showPage();
});

关于javascript - 尝试使用加载器动画来购买我的网页一些时间来加载，但网页仍然只在动画之后和 block 中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41817298/

24 4 0
文章推荐： linux - 如何启动嵌入在 Eclipse 插件中的可执行文件？
文章推荐： python - 无法在 flask 制作的网页中设置背景图片
文章推荐： linux - 在 Linux 上，如何使用 POSIX shell 禁用鼠标一秒钟，而不是等待第二个并立即做一些工作？
文章推荐： java - 什么是 NullPointerException，我该如何解决？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com