-1
私のサイトでFOUCを防止しようとしています。これまでのコードです：
<head>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
<style type="text/css">
.no-fouc {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'no-fouc';
$(document).ready(function() {
$('.no-fouc').removeClass('no-fouc');
});
</script>
</head>
ここで私は間違っていますか？私はまだ約1〜2秒のFOUCを得ています。
<head>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
<style type="text/css">
.no-fouc {display: none;}
</style>
<script type="text/javascript">
document.documentElement.className = 'no-fouc';
$(window).on("load", function() {
$('.no-fouc').removeClass('no-fouc');
});
</script>
</head>
よりもむしろ使用して：：
$(document).ready(function() {
は、私が使用：
$(window).on("load", function() {
ブラウザのコンソールを確認してください（次回は、ここで質問してください、ありがとうございます）。 '$'はこの時点では存在しないと言いました。なぜなら、あなたはそのスクリプトブロックのjQuery _after_を埋め込むだけなのでです。 – CBroe
この質問に何か問題があるようです。あなたはファイルの一番下にスタイルを置く（その理由はテキストをより速く表示することになる）、CSSが読み込まれるまであなたのテキストを隠そうとする。ちょうどあなたのCSSを普通の位置（上に）に置くとすべてがfine –
コードを再注文しました。スタイルと最終的なスクリプトがなかったときと同じ方法でページが読み込まれます。 –