Cacher la page pendant le chargement (JS / CSS ?)

Question

Bonsoir,
Après beaucoup de recherches je n'arrive pas à trouver comment faire pour ne pas afficher le site entrain de charger.
Je voudrais par exemple une page de chargement qui durerait que quelques dixièmes de secondes,
pour ne pas avoir le site affiché avec les fonts pas encore chargées par exemple.
Merci beaucoup =)

jordane45 · Answer

Bonjour,
Il te suffit de mettre une DIV contenant une image d'attente au premier plan ( le reste de ton contenu se trouvant dans une DIV cachée (style ='display : none;' par exemple)) et une fois le contenu de ta page ,les CSS et les JS chargés.. tu masques la div d'attente et affiche l'autre.

Tu peux utiliser une fonction qui regarde si la page est chargée ou non

var callback = function(){
   //ici tu places le code qui retire la div d'attente et qui affiche le contenu de ta page  
};

//code qui permet d'attacher la fonction au chargement de la page
if ( document.readyState === "complete" ||  (document.readyState !== "loading" && document.documentElement.doScroll)) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}

Cacher la page pendant le chargement (JS / CSS ?)

1 réponse

Votre réponse

Discussions similaires