重新載入深色模式頁面時如何防止白色閃爍？-css教學-PHP中文網

重新載入深色模式頁面時如何防止白色閃爍？

Barbara Streisand

發布： 2024-11-01 07:05:31

原創

745 人瀏覽過

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

深色模式重新加載時出現白色閃爍問題

在實現利用本地存儲進行持久化的深色模式功能時，面臨的一個常見問題是頁面重新載入時白色背景閃爍。出現這種情況是因為 DOM 解析器通常會在套用深色模式樣式之前渲染頁面。

解決方案：阻止頁面渲染

要解決此問題，我們可以阻止頁面使用放置在

中的小腳本進行渲染您的文件。該腳本將在上設定 data-theme 屬性。

將以下腳本放入

元素中，然後繼續渲染頁面。在任何其他標籤之前：

<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>

登入後複製

接下來，將所有其他腳本移到關閉之前的非渲染阻塞方式。 tag:

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

登入後複製

最後，在js/index.js 檔案中，使用以下程式碼：

<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>

登入後複製

透過實作此解決方案，您可以防止白色閃爍並確保頁面重新載重時淺色和深色模式之間的無縫過渡。

以上是重新載入深色模式頁面時如何防止白色閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！