Bagaimana untuk Mencegah Kelipan Putih Apabila Memuat Semula Halaman Mod Gelap?-tutorial css-php.cn

Bagaimana untuk Mencegah Kelipan Putih Apabila Memuat Semula Halaman Mod Gelap?

Barbara Streisand

Lepaskan： 2024-11-01 07:05:31

asal

804 orang telah melayarinya

How to Prevent White Flickering When Reloading a Dark Mode Page?

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 dokumen anda. Skrip ini akan menetapkan atribut tema data pada elemen dan kemudian teruskan memaparkan halaman.

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!