Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?

Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?

Barbara Streisandasal: 2024-10-31 18:19:29512semak imbas

How to Prevent White Background Flickering on Page Reload in Dark Mode?

Mod Gelap Berkelip-kelip Latar Belakang Putih pada Muat Semula Halaman

Isu ini timbul apabila pengguna mendayakan mod gelap dan memuat semula halaman, mengakibatkan seketika latar belakang putih dipaparkan sebelum ia kembali kepada mod gelap. Kelipan ringkas ini boleh mengganggu dan menjejaskan pengalaman pengguna.

Untuk menangani masalah ini, penyelesaian yang ideal ialah menghalang halaman daripada dipaparkan sehingga tetapan mod gelap yang diperlukan telah digunakan. Ini boleh dicapai dengan meletakkan tag pada permulaan elemen.

<code class="html"><head>
  <script>
    // Set theme in <HEAD> to avoid render blocking.
    const setTheme = (theme) => {
      theme ??= localStorage.theme || "light";
      document.documentElement.dataset.theme = theme;
      localStorage.theme = theme;
    };
    setTheme();
  </script>
  <!-- Meta, title, etc... -->
  <!-- Link, style, etc... -->
</head></code>

Dengan melaksanakan skrip ini sebelum sebarang teg lain, penyemak imbas akan menjeda penghuraian DOM dan menggunakan penterjemah JavaScript. Ini membenarkan atribut tema data diperuntukkan kepada elemen, memastikan halaman dimuatkan dengan lancar dengan mod gelap didayakan.

Selain itu, adalah disyorkan untuk memuatkan skrip yang tinggal dalam cara tidak menyekat paparan, sejurus sebelum penutupan tag:

<code class="html"><body>
  <!-- Page content -->
</body>
<script src="js/index.js"></script>
<!-- Other <script> tags here -->
<!-- Closing </body> </html> goes here --></code>

Dalam fail js/index.js, skrip boleh disertakan seperti 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>

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Latar Belakang Putih Berkelip pada Muat Semula Halaman dalam Mod Gelap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html Attribute JS dom this background 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 Menjajarkan Item Flex ke Kiri Apabila Membungkus?Artikel seterusnya：Bagaimana untuk Menjajarkan Item Flex ke Kiri Apabila Membungkus?

Artikel berkaitan

Lihat lagi