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

Jadual Kandungan

Menangani Denyar Kandungan Tidak Digayakan

Rumah

hujung hadapan web

tutorial css

Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Gaya (FOUC)?

php.cn

Nov 22, 2024 pm 05:29 PM

How to Eliminate the Flash of Unstyled Content (FOUC)?

Menangani Denyar Kandungan Tidak Digayakan

Kemunculan kandungan tidak digayakan yang tidak diingini semasa halaman web dimuatkan adalah isu biasa yang dikenali sebagai Flash of Unstyled Content (FOUC ). Artikel ringkas ini menangani masalah ini dan penyelesaiannya.

Pendekatan tradisional untuk menyembunyikan elemen halaman dengan CSS dan seterusnya mendedahkannya dengan JavaScript adalah bermasalah. Ia menjejaskan kebolehgunaan tapak web untuk pengguna dengan JavaScript dilumpuhkan.

Untuk mengatasinya, disyorkan untuk menggunakan JavaScript untuk menyembunyikan dan memaparkan elemen selepas halaman dimuatkan. Walaupun jQuery menawarkan penyelesaian awal, ia mungkin tidak cukup pantas untuk mengelakkan FOUC untuk halaman yang lebih besar.

Teknik yang lebih berkesan ialah menyembunyikan teg HTML dengan JavaScript sebelum halaman dipaparkan, membolehkan penyembunyian pantas selepas pelaksanaan skrip :

&lt;html&gt;
  &lt;head&gt;
    ...
    &lt;style&gt;
      .hidden { display: none; }
    &lt;/style&gt;
    ...
    &lt;script&gt;
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    ...
  &lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Dalam pendekatan ini, fungsi addClass() jQuery digunakan di luar kaedah .on('load'), memastikan teg HTML disembunyikan serta-merta.

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

Kenyataan Laman Web ini

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