Пытаясь использовать анимацию загрузчика, чтобы купить мою веб-страницу некоторое время для загрузки, но веб-страница по-прежнему загружается только после анимации и в кусках

Я пытаюсь создать сайт, который использует анимацию загрузчика в начале, чтобы купить «большую часть» моего веб-сайт некоторое время для загрузки. Я установил анимацию загрузчика на 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>

источник

2017-01-23 Lasagna Cat

Вместо того, чтобы гадать, когда ваш контент готов к просмотру вы можете прикрепить обработчик события к документу для прослушивания DOMContentLoaded затем вызвать вашу showPage() функцию в этом. Как это:

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

источник

2017-01-23 23:11:18 Pat

Проблема, которую я испытываю в моем текущем коде, что текущая веб-страница не будет загружаться, пока загрузчик анимации будет сделано, независимо от того, я поставил его на одну секунду, две секунды, три секунды или десять секунд. –

Козефей, кажется, работает нормально – Pat

Кодепэн имел очень мягкую строку текста, например, цели, которые, как мне кажется, было намного легче загружать по сравнению с тем, что я упомянул в исходном потоке, что я загружаю весь сайт, на котором есть загрузочный файл и другие различные интерфейсные интерфейсы. Я действительно использую шаблон веб-страницы, такой как этот http://www.free-css.com/free-css-templates/page208/build –

ответ

Смежные вопросы