3

http://50.97.104.102/~topdog/を構築しているレスポンシブ Web サイトがあります。デスクトップ CSS はスタイルシートの下部に表示されるため、ページはモバイル レイアウトで 0.5 秒間レンダリングされます (ロゴは中央に表示されます)。次に、デスクトップ形式に切り替えます。これは IE 6、7、および 8 でのみ発生します。0.5 秒しか続かない非常に微妙な問題です。最近のほとんどのブラウザー (私はクロムを使用しています) は、ページをレンダリングする前に、すべての css が読み込まれるまで待機しているようです。

ページをレンダリングする前に、CSS ファイル全体がロードされるまで IE 6、7、および 8 を強制的に待機させる方法はありますか? できればjavascriptなしで。

4

1 に答える 1

2

次のCSSを使用できます

body {
  visibility: hidden;
}
body.finished {
   visibility: visible;
}

そして、onload ハンドラーから、完成したクラスを本体に追加します。

これは、JS がないと機能しません。これをJSなしで機能させたい場合は、JSが無効になっている場合はちらつきが発生しますが、JSが有効になっている場合はちらつきがなくなります。

body.not-ready{
   visibility: hidden;
}

<body>
<script>
  $(document.body).addClass('not-ready');
  $(window).load(function(){
    $(document.body).removeClass('not-ready')
  });
</script>

</body>
于 2012-04-24T20:51:34.810 に答える