web-dev-qa-db-fra.com

Élimine le flash de contenu sans style

Comment arrêter le flash de contenu non stylisé (FOUC) sur une page Web?

cssfouc
65
CMS Critic

Ce que j'ai fait pour éviter FOUC, c'est:

  • Définissez la section de corps comme: <body style="visibility: hidden;" onload="js_Load()">

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

Avec cette approche, le corps de ma page Web est 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 reste vide jusqu'à ce que tout apparaisse à l'écran.

Il s'agit d'une solution simple mais qui fonctionne jusqu'à présent.

6
Álvaro Durán

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 redéfinir le style sur visible après le chargement de la page, est que les personnes qui n'ont pas activé javascript ne verront jamais ces éléments. C'est donc une solution qui ne se dégrade pas gracieusement.

Par conséquent, une meilleure façon est d'utiliser javascript 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 grande 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 masquer dès qu'un script est rencontré dans la tête, avant même que le document ne soit prêt: la balise HTML. Nous pourrions donc faire quelque chose comme ceci:

<html>
  <head>
  <!-- Other stuff like title and meta tags go here -->
  <style type="text/css">
    .hidden {display:none;}
  </style>
  <script type="text/javascript" src="/scripts/jquery.js"></script>
  <script type="text/javascript">
    $('html').addClass('hidden');
    $(document).ready(function() {    // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

Notez que la méthode jQuery addClass () est appelée * en dehors * de la méthode .ready () (ou mieux, .on ('load')).

77
Stefan

Une solution CSS uniquement:

<html>
  <head>
    <style>
      html {
        display: none;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
  </body>
</html>

Lorsque le navigateur analyse le fichier HTML:

  • La première chose à faire est de masquer <html>.
  • La dernière chose à faire est de charger les styles, puis d'afficher tout le contenu avec le style appliqué.

L'avantage de cela par rapport à une solution qui utilise JavaScript est que cela fonctionnera pour les utilisateurs même s'ils ont désactivé JavaScript.

Remarque: vous êtes autorisé pour mettre <link> à l'intérieur de <body>. Je le vois cependant comme un inconvénient, car il viole la pratique courante. Ce serait bien s'il y avait un attribut defer pour <link> comme pour <script>, car cela nous permettrait de le mettre dans le <head> et encore atteindre notre objectif.

20
Adam Zerner

Une solution qui ne dépend pas de jQuery, qui fonctionnera sur tous les navigateurs actuels et ne fera rien sur les anciens navigateurs, inclut les éléments suivants dans votre balise head:

<head>
    ...

    <style type="text/css">
        .fouc-fix { display:none; }
    </style>
    <script type="text/javascript">
        try {
            var Elm=document.getElementsByTagName("html")[0];
            var old=Elm.class || "";
            Elm.class=old+" fouc-fix";
            document.addEventListener("DOMContentLoaded",function(event) {
                Elm.class=old;
                });
            }
        catch(thr) {
            }
    </script>
</head>

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

<script type="text/javascript">
    var Elm=document.getElementsByTagName("html")[0];
    Elm.style.display="none";
    document.addEventListener("DOMContentLoaded",function(event) { Elm.style.display="block"; });
</script>
18
Lawrence Dol

C'est celui qui a fonctionné pour moi et ne nécessite pas de javascript et il fonctionne très bien pour les pages avec de nombreux éléments et beaucoup de CSS:

Tout d'abord, ajoutez un <STYLE> paramètre pour le <HTML> tag avec visibilité "caché" et opacité "0" en haut de votre code HTML, par exemple, au début du <HEAD> élément, par exemple, en haut de votre ajout HTML :

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

Ensuite, à la fin de votre dernier fichier de feuille de style .css , définissez les styles de visibilité et d'opacité sur 'visible' et '1', respectivement:

html {
    visibility: visible;
    opacity: 1;
}

Si vous avez déjà un bloc de style existant pour la balise 'html', déplacez tout le style 'html' à la fin du dernier fichier .css et ajoutez les balises 'visibilité' et 'opacity' comme décrit ci-dessus.

https://Gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb

14
Jeff

Un autre correctif rapide qui fonctionne également dans Firefox Quantum est un <script> tag dans le <head>. Cependant, cela pénalise vos informations de vitesse de page 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 sont en cours.

<script type="text/javascript">

</script>
7
Paul Cream

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 tout @import liens avec <link />

4
danidee

J'ai trouvé un moyen qui ne nécessite aucun changement de code, woohoo! Mon problème était lié à l'importation de plusieurs fichiers css après certains fichiers javascript.

Pour résoudre le problème, je viens de déplacer mes liens CSS afin qu'ils soient au-dessus de mes importations javascript. Cela a permis à tous mes CSS d'être importés et prêts à être utilisés dès que possible, de sorte que lorsque le HTML apparaît à l'écran, même si le JS n'est pas prêt, la page sera correctement formatée

1
Jake Boomgaarden

Voici mon code .. j'espère qu'il résoudra votre problème

set <body style="opacity:0; >

<script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>
0
Coding_snakeZ