ホームページ > 記事 > ウェブフロントエンド > ダークモードでページをリロードする際に白い背景のちらつきを防ぐ方法は?
ダークモードでページをリロードする際に白い背景のちらつきを防ぐ方法は?
- Barbara Streisandオリジナル
- 2024-10-31 18:19:29512ブラウズ
ページのリロード時にダーク モードで白い背景がちらつく
この問題は、ユーザーがダーク モードを有効にしてページをリロードすると発生し、一時的なダークモードに戻る前に白い背景が表示されます。この短いちらつきは気が散り、ユーザー エクスペリエンスを損なう可能性があります。
この問題に対処するための理想的な解決策は、必要なダーク モード設定が適用されるまでページのレンダリングを防ぐことです。これは、最小限の <script> を配置することで実現できます。 <head> の先頭にタグを追加します。 element.</script>
<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>
他のタグの前にこのスクリプトを実行すると、ブラウザは DOM 解析を一時停止し、JavaScript インタープリタを呼び出します。これにより、data-theme 属性を に割り当てることができます。
さらに、 を閉じる直前に、レンダリングをブロックしない方法で残りのスクリプトをロードすることをお勧めします。 tag:
<code class="html"><body> <!-- Page content --> </body> <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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。