Rumah > Artikel > hujung hadapan web > 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:31731semak imbas

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>

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!

html for continue using finally Attribute JS dom this background transition issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Tetapkan Fokus pada Elemen Input dalam Penyemak Imbas Berbeza?Artikel seterusnya：Bagaimana untuk Tetapkan Fokus pada Elemen Input dalam Penyemak Imbas Berbeza?

Artikel berkaitan

Lihat lagi