39

ページが読み込まれるとjQueryを使用して非表示にするphpページにdivがあります。しかし、ロードアップの最初からそれを隠す方法はありますか?

私が尋ねる理由は、ページの読み込み中に div が一瞬表示され、ページが完全に読み込まれると非表示になるためです。

それは専門外に見えます。

これを回避する方法があるかどうか疑問に思っていますか？

ありがとう

4

6 に答える 6

84

css スタイルを使用して div を非表示にします。

#selector { display: none; }

または以下のように使用します。

CSS:

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

そしてjQueryで

 $(function () {
     $('#blah').removeClass('hidden');
 });
于 2012-04-13T21:40:37.827 に答える
9

私は同じ問題を抱えていました。

CSS を使用して非表示にすることは最善の解決策ではありません。JS を使用していないユーザーに div を表示させたい場合があるためです。最もクリーンな解決策は、JQuery を使用して div を非表示にすることです。ただし、div は約 0.5 秒表示されます。これは、div がページの上部にある場合に問題になります。

このような場合、JQuery を使用しない中間ソリューションを使用します。これは機能し、即時です：

<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 toggle() を追加することもできます。そして、可能な限り最高の動作が得られます（imho）：

  • 非JSユーザーの場合、divは直接表示されます
  • JS ユーザーの場合、div は非表示になり、トグル効果があります。
于 2013-10-01T09:57:51.693 に答える
8

CSS ソリューションを禁止します。最も速い方法は、スクリプトを使用してすぐに非表示にすることです。

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

この場合、Vega による CSS ソリューションをお勧めします。しかし、もっと複雑なもの (アニメーションなど) が必要な場合は、このアプローチを使用できます。

これにはいくつかの複雑な問題があります (以下のコメントを参照してください)。このスクリプトを可能な限り高速に実行したい場合は、jQuery を使用できず、ネイティブ JS のみを使用し、他のすべてのスクリプトの読み込みを延期します。

于 2012-04-13T21:42:41.683 に答える
2

「display: none;」を追加しない理由 divs スタイル属性に? JQuery の .hide() 関数でできることはこれだけです。

于 2012-04-13T21:41:18.107 に答える
0

CSS を使用すると、CSS ファイルまたはスタイル属性の要素に display:none を設定できます。

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

または、divの直後にjsを配置することも十分に高速かもしれませんが、それほどきれいではありません

于 2012-04-13T21:41:32.143 に答える