Essayer d'utiliser l'animation loader pour acheter un peu de temps pour charger ma page web, mais la page web ne charge toujours qu'après l'animation et en morceaux

J'essaye de faire un site web qui utilise une animation loader au début pour acheter le "gros" de mon site Web un certain temps à charger. J'ai mis l'animation du chargeur à 3 secondes et mon élément <body> à afficher comme caché. Cependant, lorsque l'animation du chargeur de 3 secondes est terminée, mon site Web se charge toujours en morceaux.Essayer d'utiliser l'animation loader pour acheter un peu de temps pour charger ma page web, mais la page web ne charge toujours qu'après l'animation et en morceaux

Le code ci-dessous a le code exact que j'utilise, cependant le <body> est réduit à une simple phrase à cause de ce fil. J'utilise actuellement un modèle html/css/js/bootstrap avec des images, des favicons et d'autres choses. Ce n'est pas si lourd qu'un site, mais il y a beaucoup de médias là-bas.

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>

Source

2017-01-23 Lasagna Cat

Au lieu de deviner quand est prêt votre contenu à vue, vous pouvez joindre un gestionnaire d'événements au document pour écouter DOMContentLoaded puis appelez votre fonction showPage() dans ce. Comme ceci:

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

Source

2017-01-23 23:11:18 Pat

Le problème que je ressentais dans mon code actuel est que la page Web réelle ne se charge pas qu'après l'animation du chargeur se fait, peu importe si je mets à une seconde, deux secondes, trois secondes dix secondes. –

Le codepen semble fonctionner correctement – Pat

Le codepen avait une chaîne de texte très légère à des fins d'exemple, ce que j'imagine était beaucoup plus facile à charger que ce que j'avais mentionné dans le fil d'origine que je charge un site Web complet qui a bootstrap et d'autres divers cadres frontaux. J'utilise en fait un modèle de page web comme celui-ci http://www.free-css.com/free-css-templates/page208/build –

Essayer d'utiliser l'animation loader pour acheter un peu de temps pour charger ma page web, mais la page web ne charge toujours qu'après l'animation et en morceaux

Répondre

Questions connexes