1
私はユーザーに、別のCSSファイルを追加することによって提供される「明るい」テーマ（デフォルト）と「暗い」テーマを選択できるようにします。JSにCSSリンクタグを挿入するときにページのレンダリングを防止する
ここにJavaScriptコードがあります。ご覧のように、私は将来、追加のテーマを提供しようとしました。
var themes = {
"dark": "HTML/css/dark-theme.css"
};
var themeCssLink = document.createElement('link');
themeCssLink.setAttribute('rel', 'stylesheet');
document.getElementsByTagName('head')[0].appendChild(themeCssLink);
var theme = localStorage.getItem('theme');
if (!(theme in themes))
theme = null;
if (theme !== null)
themeCssLink.setAttribute('href', themes[theme])
これに伴う問題は、ページは、私がないようにする方法を知りたいのですが、明るい白のフラッシュを引き起こし、暗いテーマのCSSがロードされる前にレンダリングすることです。
<link href='' rel='stylesheet' type='text/css' id='theme-css'>
してからちょうどJavaScriptでのhrefを変更する：
私が試したもう一つは、HTML内のダミーLINK要素を入れていた
var themeCssLink = document.getElementById('theme-css');
var theme = localStorage.getItem('theme');
if (!(theme in themes))
theme = null;
if (theme !== null)
themeCssLink.setAttribute('href', themes[theme]);
残念ながら、これは同じ効果があります。
テーマCSSファイルが読み込まれるまでブラウザでレンダリングをブロックするにはどうすればよいですか？
インクルードの順番は？したがって、JavaScriptにページに含まれるのはいつですか？レンダリングは、javascriptに遭遇すると停止するはずです。そのため、時々ボディの最後にインクルードを入れることを推奨しました。 – puelo
新しいCSSファイルを追加する前に、現在のCSSファイルを無効にしている可能性がありますか？少し古いが、いくつかのアイデア：https://stackoverflow.com/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery – wazz