Comment éliminer le Flash de contenu non stylé (FOUC) de manière plus efficace ?-tutoriel CSS-php.cn

Comment éliminer le Flash de contenu non stylé (FOUC) de manière plus efficace ?

Linda Hamilton

Libérer： 2024-11-13 17:33:02

original

305 Les gens l'ont consulté

How to Eliminate Flash of Unstyled Content (FOUC) in a More Effective Way?

Élimination du flash de contenu sans style

Le flash de contenu sans style (FOUC) se produit lorsqu'une page Web apparaît brièvement sans style avant que le navigateur puisse l'appliquer la feuille de style CSS. Cet article explore une approche plus efficace pour empêcher FOUC, en utilisant JavaScript pour initialement masquer puis afficher les éléments de la page :

Masquer et afficher avec JavaScript

Masquer initialement les éléments de la page avec CSS, puis les afficher avec JavaScript peut entraîner des problèmes d'accessibilité pour les utilisateurs dont JavaScript est désactivé. Une meilleure solution consiste à utiliser JavaScript pour masquer et afficher.

Exemple avec jQuery

Une approche possible en utilisant jQuery :

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

Copier après la connexion

Cependant , cette méthode repose sur le fait que le corps du document soit prêt avant de le masquer, ce qui peut encore entraîner des problèmes. FOUC.

Approche optimisée : masquage de la balise HTML

Une stratégie alternative consiste à utiliser JavaScript pour masquer la balise HTML immédiatement lorsque le script est rencontré dans l'en-tête, avant même le document est prêt :

<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');
      $(window).on('load', function () {
        $('html').show();
      });  
    </script>
  </head>
  <body>
    <!-- Body Content -->
  </body>
</html>

Copier après la connexion

Dans cet exemple, la méthode jQuery addClass() est appelée en dehors de la fonction .load() pour masquer la balise HTML immédiatement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!