Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Gaya (FOUC)?
Bagaimana untuk Menghapuskan Kilatan Kandungan Tidak Gaya (FOUC)?
- asal
- 2024-11-22 17:29:14893semak imbas
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 :
<html>
<head>
...
<style>
.hidden { display: none; }
</style>
...
<script>
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
...
</body>
</html>
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!