私のPHPページにjQueryを使用して、ページが読み込まれると非表示にするdivがあります。しかし、ロードアップの開始からそれを隠す方法はありますか？JavaScript - 起動時にdivを非表示にする（ロード）
私が尋ねる理由は、ページが読み込まれているときにdivが表示され、ページが完全に読み込まれたときに非表示になるためです。
これはプロフェッショナルなようです。
これを回避する方法があるのだろうか？
ありがとう
divを非表示にするには、cssスタイルを使用します。
#selector { display: none; }
以下のようにそれを使用して、
CSS
：.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
とjQueryで
$(function() {
$('#blah').removeClass('hidden');
});
「display：none;」を追加しないのはなぜですか？ divsスタイル属性に？ JQueryの.hide（）関数はすべてそうです。 CSSファイルまたはスタイル属性
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
やdiv要素があまりにも十分に速いが、クリーンではないかもしれ直後のjsを持つの要素のためになし：あなただけの表示を設定することができますCSSを使用して
OPを見ると、jQueryがロードされる前にdivを非表示にする必要があります。それがFOUCの原因です。 jQueryがロードされている間、divが隠されていることを確認するには、CSSソリューションを使用する必要があります。 .hide（）を使うと、jQueryがロードされた後にのみ動作します。 – JimP
@JimpP私はMooがあなたがそれを要素に直接追加するべきだと思っていると思います。
最初からhtmlから要素を隠しています。 jQueryはこのcss属性をhide関数とshow関数で使用します。私はこれが良い答えだと思っていますが、より詳細にすべきです。 – thinkttCSSソリューションを除外します。可能なかぎり最速の方法は、スクリプトを使って即座にスクリプトを隠すことです。
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
この場合、VegaのCSSソリューションをお勧めします。しかし、もっと複雑なもの（アニメーションのようなもの）が必要な場合は、このアプローチを使用することができます。
これにはいくつかの問題があります（下記のコメントを参照）。このスクリプトを実際にできるだけ速く実行したい場合は、jQueryを使用することはできません。ネイティブJSのみを使用し、他のすべてのスクリプトのロードを延期してください。
'script'タグをインライン化すると、HTMLファイルに混乱が生じるだけです。 –
彼は絶対的なスピードが必要です、その目標はちょっと混乱したHTMLを正当化します。実用的で、いつ標準から逸脱するかを知る。 – Halcyon
しかし、私はjQueryが既にロードされているとは思わない... '$（" hideme "）。hide（）;'あなたに 'ReferenceError'を与えるかもしれません... –
私は同じ問題を抱えています。
CSSを使用して非表示にすることは最適な解決策ではありません。なぜなら、JSを持たないユーザーがdivを参照できるようにするためです。 最もクリーンな解決策は、JQueryでdivを非表示にすることです。しかしdivは約0.5 secondeに見えますが、divがページの上部にある場合は問題になります。
これらの場合、JQueryを使用しない中間ソリューションを使用します。この1は動作し、即時である：
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
もちろん、あなたはまだ例えば、DIV、jQueryのトグル（）にしたいすべてのエフェクトを追加することができます。 そして、あなたは最良の動作可能（私見）を取得します：非JSのユーザーのための
この方法は非常に良い方法だとは分かりませんが、私のニーズにはうまくいきます。
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
なぜ動作するのですか？どのような変更を加えましたか？この方法で質問に取り組む答えは、読者が自分の問題をより良く理解するのに役立ちます –
divのcssを 'display：none'に設定することはできませんか？ –
私はこのコースに合格することをお勧めします：http://www.w3schools.com/css/、cssに関する質問を提出する前に。 – pylover
私はそうしないことをお勧めします。 w3schoolsは正しいほど頻繁に間違っています。 – Halcyon