Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Digayakan dengan Kemerosotan Anggun?-tutorial css-php.cn

Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Digayakan dengan Kemerosotan Anggun?

Susan Sarandon

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

asal

478 orang telah melayarinya

How to Eliminate Flash of Unstyled Content with Graceful Degradation?

Menghapuskan Kilatan Kandungan Tidak Digayakan: Pendekatan Penurunan Anggun

Kilatan kandungan tidak digayakan (FOUC) berlaku apabila elemen halaman web muncul secara ringkas tanpa gaya yang dimaksudkan sebelum JavaScript bermula untuk menggunakan gaya tersebut. Untuk mengelakkan kesan yang tidak sedap dipandang ini, kami akan meneroka penyelesaian yang merosot dengan anggun tanpa menjejaskan fungsi untuk pengguna dengan JavaScript dilumpuhkan.

Sembunyikan Elemen dengan JavaScript, Bukan CSS

Pada mulanya menyembunyikan elemen dengan CSS dan kemudian mendedahkannya dengan JavaScript adalah bermasalah kerana pengguna tanpa JavaScript didayakan tidak akan melihat elemen tersebut. Pendekatan yang lebih baik ialah menggunakan JavaScript untuk kedua-dua menyembunyikan dan memaparkan elemen.

jQuery untuk Menyembunyikan dan Menunjukkan Kandungan Halaman

Menggunakan jQuery, kami boleh menyembunyikan kandungan halaman dengan berkesan:

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

Salin selepas log masuk

Mengoptimumkan Paparan dengan HTML Menyembunyikan

Walau bagaimanapun, untuk halaman besar, kod di atas mungkin tidak menghalang FOUC. Oleh itu, kita boleh menyembunyikan elemen HTML sebaik sahaja JavaScript ditemui di kepala:

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

Salin selepas log masuk

Perhatikan bahawa kaedah addClass() jQuery digunakan di luar $(window).on('load') panggil balik untuk menyembunyikan elemen HTML serta-merta.

Pendekatan ini memastikan kemerosotan yang anggun dengan memastikan kandungan halaman disembunyikan pada mulanya dan dipaparkan sebaik sahaja halaman itu dimuatkan sepenuhnya, walaupun untuk pengguna yang tidak mendayakan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Digayakan dengan Kemerosotan Anggun?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!