web-dev-qa-db-fra.com

Preloader pour un site Wordpress

Si je veux ajouter un pré-chargeur à un site Wordpress qui va avoir un contenu d'image élevé, est-il préférable de mettre le code dans la tête du site?

J'ai fait un thème enfant sur mon site localhost, mais je n'arrive pas à voir où se trouve le meilleur endroit pour mettre le hmtl/javascript. Je ne suis pas trop inquiet à propos du CSS car le lien menant à cela se trouve quand même dans le site afin que je puisse placer le CSS dans le fichier style.css de mon thème enfant.

Si je mets le JS dans le fichier JS de mon thème enfant, il ne fonctionnera pas correctement, car le site devra être analysé pour que cela puisse démarrer.

Toute aide sera merveilleuse

Merci

Emilie,

javascriptperformance
1
The Chewy

Vous voudrez mettre le code dans le thème enfant, sinon une mise à jour du thème parent l'effacera.

Vous souhaitez que le chargeur fasse partie de la page lors du chargement initial du document par le navigateur, puis utilisez javascript pour détecter le chargement des images et supprimer le chargeur.

Consultez ces ressources contenant plus d’informations sur la structure du HTML et du javascript.

https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded

http://smallenvelop.com/display-loading-icon-page-loads-completely/

1
Miles Elliott

Ajoutez ci-dessous CSS dans votre fichier CSS.

/** Body Overlay **/
body #load {
    display: block;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9901;
    opacity: 1;
    background-color: #FFFFFF;
    visibility: visible;
    -webkit-transition: all .35s ease-out;
    transition: all .35s ease-out;
}
body #load.loader-removed {
    opacity: 0;
    visibility: hidden;
}
.spinner-loader .load-wrap {
    background-image: url("images/loader.png");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
}

Ajoutez le code ci-dessous juste après la balise d'ouverture de votre site Web.

<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>
<script type="text/javascript">
    // Javascript function to display loader on page load
    document.addEventListener("DOMContentLoaded", function(event) {
        var $load = document.getElementById("load");
        var removeLoading = setTimeout(function() {
            $load.className += " loader-removed";
        }, 500);
    });
</script>

J'espère que cela t'aides..!!

0
dhirenpatel22