Comment éliminer le flash de contenu sans style avec une dégradation gracieuse ?-tutoriel CSS-php.cn

Comment éliminer le flash de contenu sans style avec une dégradation gracieuse ?

Susan Sarandon

Libérer： 2024-11-13 05:06:02

original

549 Les gens l'ont consulté

How to Eliminate Flash of Unstyled Content with Graceful Degradation?

Éliminer le flash de contenu sans style : une approche de dégradation gracieuse

Le flash de contenu sans style (FOUC) se produit lorsque des éléments de page Web apparaissent brièvement sans leurs styles prévus avant que JavaScript n'intervienne pour appliquer ces styles. Pour éviter cet effet disgracieux, nous allons explorer une solution qui se dégrade gracieusement sans compromettre les fonctionnalités pour les utilisateurs dont JavaScript est désactivé.

Masquer les éléments avec JavaScript, pas CSS

Initialement masquer des éléments avec CSS puis les révéler avec JavaScript est problématique car les utilisateurs sans JavaScript activé ne verront jamais ces éléments. Une meilleure approche consiste à utiliser JavaScript pour masquer et afficher des éléments.

jQuery pour masquer et afficher le contenu de la page

En utilisant jQuery, nous pouvons masquer efficacement le contenu de la page :

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

Copier après la connexion

Optimisation de l'affichage avec masquage HTML

Cependant, pour les grandes pages, le code ci-dessus peut ne pas empêcher le FOUC. Par conséquent, nous pouvons masquer l'élément HTML dès que JavaScript est rencontré dans le head :

<html>
  <head>
    <style type="text/css">
      .hidden {display:none;}
    </style>
    <script type="text/javascript">
      $('html').addClass('hidden');
      $(window).on('load', function() {
        $('html').removeClass('hidden');
      });  
    </script>
  </head>
  <body>
    <!-- Body Content -->
  </body>
</html>

Copier après la connexion

Notez que la méthode jQuery addClass() est invoquée en dehors du $(window).on('load') rappel pour masquer l'élément HTML immédiatement.

Cette approche garantit une dégradation gracieuse en garantissant que le contenu de la page est masqué initialement et affiché une fois la page complètement chargée, même pour les utilisateurs sans JavaScript activé.

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!