嘗試使用加載動畫來買我的網頁一些時間來加載，但網頁仍然只加載動畫之後，並按塊

我試圖做一個網站，利用裝載機動畫開始買的「批量」我網站有時間加載。我加載動畫設置爲3秒，爲隱藏要顯示我的<body>元素。然而，當3秒的加載動畫完成，我的網站仍然會加載塊。嘗試使用加載動畫來買我的網頁一些時間來加載，但網頁仍然只加載動畫之後，並按塊

下面列出的代碼中有我使用的是確切的代碼，但是<body>減少到一個簡單的句子爲這個線程的緣故。其實我使用HTML/CSS/JS /引導與圖片，網站圖標和其他東西的模板。這不是一個網站的沉重，但有很多媒體在那裏。

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然後調用內，你的功能猜測。就像這樣：

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

來源

2017-01-23 23:11:18 Pat

我在我當前的代碼遇到的問題是，實際的網頁將不會加載，直到裝載機動畫完成後，不管我把它設置爲一秒，兩秒，三秒十秒鐘。 –

該codepen似乎工作正常 – Pat

該codepen有一個非常溫和的字符串作爲例子的目的，我想這是更容易加載與我在原始線程中提到的，我正在加載一個完整的網站引導和其他各種前端框架。實際上，我使用的網頁模板，像這樣的一個http://www.free-css.com/free-css-templates/page208/build –

嘗試使用加載動畫來買我的網頁一些時間來加載，但網頁仍然只加載動畫之後，並按塊

回答

相關問題