Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip Semasa Muat Semula Mod Gelap?
Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip Semasa Muat Semula Mod Gelap?
- Patricia Arquetteasal
- 2024-11-04 02:58:011023semak imbas
Cara Menghapuskan Kelipan Latar Belakang Putih Semasa Muat Semula Mod Gelap
Apabila melaksanakan mod gelap dalam apl, adalah penting untuk menangani isu putih latar belakang berkelip apabila dimuat semula halaman. Kelipan yang tidak sedap dipandang ini berlaku apabila halaman pada mulanya dimuatkan dalam mod terang sebelum bertukar kepada mod gelap.
Penyelesaian: Cegah Pemaparan Halaman
Kunci untuk menyelesaikan isu kelipan ini terletak pada menyekat pemaparan halaman. Dengan meletakkan teg skrip kecil dalam
bahagian dokumen, anda boleh menghentikan proses parser DOM. Ini membenarkan jurubahasa JavaScript untuk menetapkan atribut tema data kepada elemen sebelum meneruskan proses pemaparan halaman.Pelaksanaan:
- Tambahkan Skrip pada :
<code class="html"><script>
// Set the theme in <HEAD> before any other tag.
const setTheme = (theme) => {
theme ??= localStorage.theme || "light";
document.documentElement.dataset.theme = theme;
localStorage.theme = theme;
};
setTheme();
</script></code>
- Alihkan Skrip ke Hujung :
Letakkan semua skrip lain dalam cara tidak menyekat render, betul-betul sebelum penutup tag:
<code class="html"><script src="js/index.js"></script> <!-- Other <script> tags here --> </body> </html></code>
- Kemas kini JavaScript untuk Kefungsian Togol:
Di dalam fail JavaScript anda, laraskan kod seperti berikut:
<code class="javascript">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>
Nota Tambahan:
- Anda boleh menggabungkan kod JavaScript di atas menjadi satu fail .js jika mahu.
- Pertimbangkan untuk menggunakan pemutar atau memuatkan animasi semasa peralihan tema awal untuk meningkatkan pengalaman pengguna.
Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip Semasa Muat Semula Mod Gelap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!