Éliminer le flash de contenu non stylé

Comment puis-je arrêter le flash de contenu non stylé (FOUC) sur une page Web?

Ce que j’ai fait pour éviter le FOUC est:

  • Définissez la section du corps comme :

  • Ecrivez une fonction JavaScript js_Load() : document.body.style.visibility='visible';

Avec cette approche, le corps de ma page Web rest caché jusqu’à ce que la page complète et les fichiers CSS soient chargés. Une fois que tout est chargé, l’événement onload rend le corps visible. Ainsi, le navigateur Web rest vide jusqu’à ce que tout s’affiche à l’écran.

C’est une solution simple mais jusqu’ici, cela fonctionne.

Le problème avec l’utilisation d’un style CSS pour masquer initialement certains éléments de la page, puis l’utilisation de JavaScript pour changer le style en visible après le chargement de la page, est que les personnes n’ayant pas activé javascript ne pourront jamais voir ces éléments. C’est donc une solution qui ne se dégrade pas avec grâce.

Une meilleure méthode consiste donc à utiliser javascript à la fois pour masquer initialement et pour réafficher ces éléments après le chargement de la page. En utilisant jQuery, nous pourrions être tentés de faire quelque chose comme ceci:

 $(document).ready(function() { $('body').hide(); $(window).on('load', function() { $('body').show(); }); }); 

Cependant, si votre page est très volumineuse avec beaucoup d’éléments, alors ce code ne sera pas appliqué assez tôt (le corps du document ne sera pas prêt assez tôt) et vous pourriez toujours voir un FOUC. Cependant, il y a un élément que nous POUVONS cacher dès que le script est rencontré dans la tête, avant même que le document soit prêt: la balise HTML. Donc on pourrait faire quelque chose comme ça:

            

Notez que la méthode jQuery addClass () est appelée * hors * de la méthode .ready () (ou mieux, .on (‘load’)).

Une solution qui ne dépend pas de jQuery, qui fonctionnera sur tous les navigateurs actuels et ne fera rien sur les anciens navigateurs.

  ...    

Grâce à @justastudent, j’ai juste essayé de définir elm.style.display="none"; et il semble fonctionner comme souhaité, au moins dans Firefox Quantum actuel. Donc, voici une solution plus compacte, étant, jusqu’à présent, la chose la plus simple que j’ai trouvée qui fonctionne.

  

Une solution uniquement en CSS:

    ...   ...     

Au fur et à mesure que le navigateur parsing le fichier HTML:

  • La première chose à faire est de cacher .
  • La dernière chose à faire est de charger les styles, puis d’afficher tout le contenu avec un style appliqué.

L’avantage d’une solution utilisant JavaScript est que cela fonctionnera pour les utilisateurs même si JavaScript est désactivé.

Note: vous êtes autorisé à mettre intérieur de . Je le vois cependant comme un inconvénient, car il viole la pratique courante. Ce serait bien s’il y avait un atsortingbut defer pour comme il y en a pour , car cela nous permettrait de le placer dans le et d'atteindre notre objective.

Une autre solution rapide qui fonctionne également dans Firefox Quantum est une vide dans le . Cela pénalise cependant votre connaissance des pages et le temps de chargement global.

J'ai eu 100% de succès avec ça. Je pense que c'est aussi la raison principale, pourquoi les solutions ci-dessus avec d'autres JS dans les travaux.

  

Personne n’a parlé de CSS @import

C’était le problème pour moi, je chargeais deux feuilles de style supplémentaires directement dans mon fichier CSS avec @import

Solution simple: remplacez tous les liens @import par