如何消除無樣式內容的 Flash (FOUC)？

解決無樣式內容的Flash

網頁載入時出現不必要的無樣式內容是一個常見問題，稱為無樣式內容的Flash ( FOUC) )。這篇簡短的文章討論了這個問題及其解決方案。

使用 CSS 隱藏頁面元素並隨後使用 JavaScript 顯示它們的傳統方法是有問題的。它會損害停用 JavaScript 的使用者的網站可用性。

為了克服這個問題，建議在頁面載入後使用 JavaScript 隱藏和顯示元素。雖然 jQuery 提供了初步的解決方案，但它可能不夠及時，無法避免較大頁面的 FOUC。

更有效的技術是在頁面渲染之前用JavaScript 隱藏HTML 標籤，從而在腳本執行時快速隱藏:

  
    ...
    <style>
      .hidden { display: none; }
    </style>
    ...
    <script>
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    </script>
  
  
    ...
  

在這種方法中，jQuery 的addClass() 函數在.on('load') 方法之外調用，確保隱藏HTML 標籤立即。

以上是如何消除無樣式內容的 Flash (FOUC)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！