0
これは長いショットです。私がしようとしていることは最終的には不可能だと思っています。最初のペイントの前にボディのクラスを変更してください
私のウェブサイトに暗い/明るいモードのスイッチを実装しようとしています。事は、サイトがS3上の静的なファイルであることです。そういうわけで、私がプレイのコントロールを持っているサーバー側はありません。
私が実行した問題は、新しいページが読み込まれたときに正しいテーマが読み込まれることです。その値はローカルストレージに保存されるため、フェッチしてページの読み込み時に値を変更する必要があります。
私の現在のアプローチはlightまたはdarkDOMContentLoaded火災に変更され、本体にhiddenの初期クラスを使用しています。残念ながら、これはまだクラスが変更される前に1つのペイントを発生させます。 JSを<head>に置くことで、私はSafariとChromeの問題を回避することができましたが、Firefoxは回避できませんでした。
最初のペイントが起きたときの問題は、画面が白から黒へと急速に変化するため、暗いものが有効になっているときに、特に激しく揺れが発生することです。
DOMContentLoadedが発生する前に、どういうわけかbodyのクラスを変更することは可能でしょうか？
おかげ
これは完全には望んでいない可能性がありますが、暗いテーマをデフォルトとして設定しましたか？そうすれば、白いフラッシュを回避することができます。 –
私はデフォルトとして暗いテーマを使いたくありません。私は最初のボディカラーを暗い背景色と明るい背景色の中間に近い値に設定しようとしましたが、最終的には常に点滅する問題があります。 –
クラスをボディに追加する代わりに、テーマクラス（ '.dark'、' .light'）を ''タグに適用して、JSを直接 '
'セクションに適用してみてください。その要素は、身体とは異なり、読み込みに時間がかかります（フラッシュを引き起こします）。試してみてください：[Pastebin]（http://pastebin.com/embed_iframe/f3NW1rFL）。このページは、遅い読み込みをシミュレートするために1秒の遅延でロードされ、画面が黒くなり、毎秒更新されます。どのブラウザでもフラッシュは見えません。 – blex