Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?-tutorial css-php.cn

Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?

Susan Sarandon

Lepaskan： 2024-12-08 05:31:10

asal

532 orang telah melayarinya

How to Eliminate Flash of Unstyled Content (FOUC)?

Strategi Mengelakkan Kilat Kandungan Tidak Gaya

Kehadiran kandungan tidak digayakan (FOUC) boleh mengganggu pengalaman pengguna pada halaman web. Artikel ini membincangkan pendekatan untuk menghapuskan FOUC.

Menyembunyikan Elemen Segera dengan JavaScript

Pada mulanya menyembunyikan elemen dengan CSS dan paparan semula berikutnya dengan JavaScript adalah bermasalah bagi pengguna yang melumpuhkan JavaScript. Pendekatan yang lebih komprehensif melibatkan penggunaan JavaScript untuk menyembunyikan dan memaparkan semula elemen selepas dimuatkan halaman.

Menggunakan jQuery, seseorang mungkin mempertimbangkan untuk menyembunyikan elemen badan seperti itu:

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

Salin selepas log masuk

Walau bagaimanapun, kaedah ini mungkin masih menghasilkan FOUC jika halaman mengandungi banyak elemen. Oleh itu, pertimbangkan untuk menyembunyikan teg HTML sebelum dokumen dimuatkan sepenuhnya:

<html>
  <head>
    <!-- Head content -->
    <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').removeClass('hidden');  
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

Salin selepas log masuk

Perhatikan bahawa kaedah addClass() dilaksanakan di luar kaedah .ready() untuk memastikan elemen segera bersembunyi.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!