Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?
Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?
- Susan Sarandonasal
- 2024-12-08 05:31:10555semak imbas
Strategi Mengelakkan Kilat Kandungan Tidak Gaya
Kehadiran kandungan tidak digayakan (FOUC) boleh mengganggu pengalaman pengguna pada halaman web. Artikel ini membincangkan pendekatan untuk menghapuskan FOUC.
Menyembunyikan Elemen Segera dengan JavaScript
Pada mulanya menyembunyikan elemen dengan CSS dan paparan semula berikutnya dengan JavaScript adalah bermasalah bagi pengguna yang melumpuhkan JavaScript. Pendekatan yang lebih komprehensif melibatkan penggunaan JavaScript untuk menyembunyikan dan memaparkan semula elemen selepas dimuatkan halaman.
Menggunakan jQuery, seseorang mungkin mempertimbangkan untuk menyembunyikan elemen badan seperti itu:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
Walau bagaimanapun, kaedah ini mungkin masih menghasilkan FOUC jika halaman mengandungi banyak elemen. Oleh itu, pertimbangkan untuk menyembunyikan teg HTML sebelum dokumen dimuatkan sepenuhnya:
<html>
<head>
<!-- Head content -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<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() dilaksanakan di luar kaedah .ready() untuk memastikan elemen segera bersembunyi.
Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Flash Kandungan Tidak Gaya (FOUC)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!