Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencegah Kelipan Putih Apabila Memuat Semula Halaman Mod Gelap?
Bagaimana untuk Mencegah Kelipan Putih Apabila Memuat Semula Halaman Mod Gelap?
- Barbara Streisandasal
- 2024-11-01 07:05:31808semak imbas
Isu Kelipan Putih dengan Muat Semula Mod Gelap
Apabila melaksanakan ciri mod gelap yang memanfaatkan storan setempat untuk kegigihan, masalah biasa yang dihadapi ialah kelipan latar belakang putih apabila dimuat semula halaman. Ini berlaku kerana penghurai DOM biasanya memaparkan halaman sebelum gaya mod gelap digunakan.
Penyelesaian: Sekat Perenderan Halaman
Untuk menyelesaikan isu ini, kami boleh menyekat halaman pemaparan menggunakan skrip kecil yang diletakkan dalam
Letakkan skrip berikut di dalam
sebelum mana-mana teg lain:<code class="html"><script>
// IMPORTANT: set this in <HEAD> top before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></code>
Seterusnya, alihkan semua skrip lain kepada cara tidak menyekat paparan betul-betul sebelum penutup tag:
<code class="html"><script src="js/index.js"></script> <!-- other <script> tags here --> <!-- Closing </body> </html> goes here --></code>
Akhir sekali, dalam fail js/index.js anda, gunakan kod berikut:
<code class="js">const elToggleTheme = document.querySelector('#dark-mode-button input[type="checkbox"]');
elToggleTheme.checked = localStorage.theme === "dark";
elToggleTheme.addEventListener("change", () => {
const theme = elToggleTheme.checked ? "dark" : "light";
setTheme(theme);
});</code>
Dengan melaksanakan penyelesaian ini, anda boleh menghalang kelipan putih dan memastikan peralihan lancar antara mod terang dan gelap apabila dimuat semula halaman.
Atas ialah kandungan terperinci Bagaimana untuk Mencegah Kelipan Putih Apabila Memuat Semula Halaman Mod Gelap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!