如何在沒有 JavaScript 的情況下防止無樣式內容的 Flash (FOUC)？

消除無樣式內容的閃現

無樣式內容的閃現（FOUC）是指網頁以其內容出現的短暫時刻。在套用 CSS 樣式之前的原始 HTML 元素。這種不和諧的效果會對使用者體驗產生負面影響。

解決方案：使用 JavaScript

常見的解決方案包括首先使用 CSS 隱藏元素，然後使用 JavaScript 在隱藏元素後取消隱藏它們。頁面加載。但是，這種方法對於停用 JavaScript 的使用者來說可能會出現問題。

更好的方法：隱藏 HTML 元素

一種更有效的方法，而不是隱藏單一元素是使用 JavaScript 隱藏整個 HTML 元素。這可以透過將隱藏類別新增至

中的 HTML 標記來實現。部分：

  
    <style type="text/css">
      .hidden { display: none; }
    </style>
    <!-- ... -->
  
  
    <!-- Body Content -->
  

在JavaScript 程式碼中，addClass() 方法用於在文件準備好之前隱藏HTML 元素：

$('html').addClass('hidden');

頁面載入後（或文件已準備好） ，HTML 元素變得可見：

$(document).ready(function() {
  $('html').removeClass('hidden');
});

透過隱藏HTML 元素，它的所有子元素也會被隱藏，從而防止任何FOUC。請注意，應在 .ready() 函數之外呼叫 addClass() 方法，才能使此方法有效運作。

以上是如何在沒有 JavaScript 的情況下防止無樣式內容的 Flash (FOUC)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！