FOUCなしでJavaScriptを使用して要素のCSSクラスを変更

JavaScriptを使用して要素のクラスを変更するHTML5の方法が見つかりました。FOUCなしでJavaScriptを使用して要素のCSSクラスを変更

HTML：

<div id="bootstrap-container" class="container-fluid fill-height"> 
    <!-- Content --> 
</div>

JavaScriptの：

var mql = window.matchMedia('(min-width: 1200px)'); 
if (mql.matches) { 
    var containerElement = document.querySelector('#bootstrap-container'); 
    if (containerElement.classList.contains('container-fluid')) { 
     containerElement.classList.remove('container-fluid'); 
     containerElement.classList.add('container'); 
    } 
}

ページを更新/ロードするときに顕著FOUCがある以外これが正常に動作します。

どうすればFOUCを離婚させることができますか？

出典

2016-08-05 PussInBoots

JSに依存するスタイリングはFOUCの可能性を秘めていますが、これは一般にFOUCを作成しにくいCSSメディアクエリだけで可能性があるようです。 – DBS

同意しますが、この場合、ブートストラップの組み込みコンテナクラスには、スタイルシートのメディアクエリブロックでオーバーライドする必要のある多くのスタイルが含まれています。これは簡単ではありません。 – PussInBoots

@DBSは一般的にあなたが正しいと言っていますが、いくつかの（有効な）ケース/ロジックがあり、メディアクエリーではカバーできません。 – MattDiMu

ブラウザがあなたのHTMLファイルを解析するとき、彼はあなたが見つけた場所のJavaScript（インラインまたは参照<script src="script.js">）を正確に実行します。したがって、上記のFOUCを回避するには2つの可能性があります。

JavaScriptを先に実行します（たとえば、クラスを操作する要素のすぐ下のインラインJavaScriptとして）。（例えばbody -tag上）のみ1「メディアクエリークラス」を設定し、あなたのJavaScriptが実行されるまであなたがコンテンツを隠す右
の下に、あなたの対応するスクリプトを配置するのは良い考えかもしれません。例えば。あなたはこの

HTML

<body class="loading"> 
... 
</body>

CSS

body.loading { 
    visibility: hidden; 
}

var mql = window.matchMedia('(min-width: 1200px)'); 
if (mql.matches) { 
    var containerElement = document.querySelector('#bootstrap-container'); 
    if (containerElement.classList.contains('container-fluid')) { 
     containerElement.classList.remove('container-fluid'); 
     containerElement.classList.add('container'); 
    } 
} 

document.body.classList.remove("loading")

出典

2016-08-05 16:16:15 MattDiMu

私は部分的なビューを作成し、ブートストラップに応答性のユーティリティを使用して、それを解決するような何かを行うことができますクラスhidden-xs、hidde n-smなど。

出典

2016-08-06 11:34:59 PussInBoots

FOUCなしでJavaScriptを使用して要素のCSSクラスを変更

答えて

関連する問題