Bagaimana untuk Mencegah Flash Kandungan Tidak Gaya (FOUC) Tanpa JavaScript?

Menghapuskan Kilat Kandungan Tidak Digayakan

Kilat kandungan tidak digayakan (FOUC) merujuk kepada detik singkat apabila halaman web muncul dengan elemen HTML mentah sebelum gaya CSS digunakan. Kesan menggelegar ini boleh memberi kesan negatif kepada pengalaman pengguna.

Penyelesaian: Menggunakan JavaScript

Penyelesaian biasa melibatkan pada mulanya menyembunyikan elemen menggunakan CSS dan kemudian menggunakan JavaScript untuk menyahsembunyikannya sebaik sahaja halaman dimuatkan. Walau bagaimanapun, pendekatan ini boleh menjadi masalah bagi pengguna yang telah melumpuhkan JavaScript.

Pendekatan yang Lebih Baik: Menyembunyikan Elemen HTML

Daripada menyembunyikan elemen individu, pendekatan yang lebih berkesan adalah untuk menyembunyikan keseluruhan elemen HTML menggunakan JavaScript. Ini boleh dicapai dengan menambahkan kelas tersembunyi pada teg HTML dalam

bahagian:

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

Dalam kod JavaScript, kaedah addClass() digunakan untuk menyembunyikan elemen HTML sebelum dokumen sedia:

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

Setelah halaman dimuatkan (atau dokumen sudah sedia), elemen HTML boleh dilihat:

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

Dengan menyembunyikan elemen HTML, semua elemen anaknya disembunyikan juga, menghalang sebarang FOUC. Ambil perhatian bahawa kaedah addClass() harus dipanggil di luar fungsi .ready() untuk pendekatan ini berfungsi dengan berkesan.

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