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

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 =)

--
Have a nice day

1 réponse

  1. Modérateur
    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);
    }
    


    0
    1. Merci beaucoup,
      Je m'y replongerais =)
      0