cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Digayakan dengan Kemerosotan Anggun?

Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Digayakan dengan Kemerosotan Anggun?

Susan Sarandon
Susan Sarandonasal
2024-11-13 05:06:02474semak imbas

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();
    });
});

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>

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!

JavaScript jquery css html for this display
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Mengapa Nginx Melayan Fail CSS Cache Walaupun Selepas Pelayan Dimulakan Semula?Artikel seterusnya：Mengapa Nginx Melayan Fail CSS Cache Walaupun Selepas Pelayan Dimulakan Semula?

Artikel berkaitan

Lihat lagi