Wie kann man das Aufblitzen von ungestylten Inhalten mit „Graceful Degradation' eliminieren?-CSS-Tutorial-php.cn

Wie kann man das Aufblitzen von ungestylten Inhalten mit „Graceful Degradation' eliminieren?

Susan Sarandon

Freigeben： 2024-11-13 05:06:02

Original

479 Leute haben es durchsucht

How to Eliminate Flash of Unstyled Content with Graceful Degradation?

Beseitigen des Flash of Unstyled Content: Ein anmutiger Degradierungsansatz

Der Flash of Unstyled Content (FOUC) tritt auf, wenn Webseitenelemente kurzzeitig auftauchen ohne ihre beabsichtigten Stile, bevor JavaScript eingreift, um diese Stile anzuwenden. Um diesen unansehnlichen Effekt zu verhindern, werden wir eine Lösung untersuchen, die für Benutzer mit deaktiviertem JavaScript problemlos abgebaut wird, ohne die Funktionalität zu beeinträchtigen.

Elemente mit JavaScript ausblenden, nicht mit CSS

Zunächst Das Ausblenden von Elementen mit CSS und das anschließende Anzeigen mit JavaScript ist problematisch, da Benutzer ohne aktiviertes JavaScript diese Elemente nie sehen werden. Ein besserer Ansatz besteht darin, JavaScript sowohl zum Ausblenden als auch zum Anzeigen von Elementen zu verwenden.

jQuery zum Ausblenden und Anzeigen von Seiteninhalten

Mit jQuery können wir Seiteninhalte effektiv ausblenden:

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

Nach dem Login kopieren

Anzeige mit HTML optimieren Ausblenden

Bei großen Seiten verhindert der obige Code FOUC jedoch möglicherweise nicht. Daher können wir das HTML-Element ausblenden, sobald JavaScript im Kopf angetroffen wird:

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

Nach dem Login kopieren

Beachten Sie, dass die jQuery-Methode addClass() außerhalb von $(window).on('load') aufgerufen wird. Rückruf, um das HTML-Element sofort auszublenden.

Dieser Ansatz gewährleistet eine ordnungsgemäße Verschlechterung, indem er sicherstellt, dass der Seiteninhalt zunächst ausgeblendet und angezeigt wird, sobald die Seite vollständig geladen ist, auch für Benutzer ohne JavaScript aktiviert.

Das obige ist der detaillierte Inhalt vonWie kann man das Aufblitzen von ungestylten Inhalten mit „Graceful Degradation' eliminieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!