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

How to Prevent White Background Flickering During Dark Mode Reload?

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!

JavaScript html if for using Attribute JS dom this position background transition animation 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：Bagaimanakah Saya Boleh Menjangkau Div Merentasi Berbilang Baris dan Lajur dalam Grid Tanpa Menggunakan Reka Letak atau Jadual Grid CSS?Artikel seterusnya：Bagaimanakah Saya Boleh Menjangkau Div Merentasi Berbilang Baris dan Lajur dalam Grid Tanpa Menggunakan Reka Letak atau Jadual Grid CSS?

Artikel berkaitan

Lihat lagi