3

私は通常、JavaScriptで非表示にする必要が生じるまで、ページで非表示のdivを使用します。以前はjavascriptを使用して最初の非表示を実行していましたが、非表示が確実に行われるように、cssを使用して非表示にするようになりました（ブラウザーでjsが無効になっています）。また、jsの非表示（jsがロードされるのを待つ）に遅延の問題がありました。

私の問題は、cssでもまだレイテンシーがあるので、以下のようなマークアップのスタイルを含めることになり、それを行うのが嫌いで、何か間違ったことをしているように感じます。

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

あなたたちはどれくらいの頻度でこれをしますか？そして、マークアップの残りの部分の前に、cssまたはjsを何らかの方法でロードする方法はありますか？

前もって感謝します

4

4 に答える 4

4

私はこれに殴られるかもしれませんが、多くのアプリでは、この待ち時間を避けたいときは、次のように、コンテンツの直後にインラインスクリプトタグを使用します。

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    $('#hidden-div').hide();
</script>

または、jQueryを使用していない場合：

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    document.getElementById('hidden-div').style.display = 'none';
</script>

最初、これは不格好に思えます。ただし、私がこのアプローチを採用する理由はいくつかあります。

  1. 非表示は即時です（DOM全体がロードされるのを待つ必要はありません）
  2. JavaScriptが無効になっているユーザーでもコンテンツは表示されますが、CSSで非表示にすると、JS以外のユーザーがコンテンツを再び表示できるようになります。

お役に立てれば！

于 2009-10-06T06:17:32.360 に答える
3

ページ上部のインラインスタイルブロックにcssを含めます。

<style>
  .hidden:  { display: none; }
</style>

次に、必要なクラスでdivに注釈を付けます。

<div class="hidden"> ... </div>

このアプローチの結果は、要素を表示するために、displayをに設定する必要はなくblock、JavaScriptを使用して要素からクラスを追加/削除するだけでよいということです。すべての要素にdisplay=blockが必要なわけではないため、これはうまく機能します（テーブルとインライン要素には異なる表示モードがあります）。

別のポスターが言ったことにもかかわらず、それは悪い習慣ではありません。CSSをプレゼンテーションマークアップと機能マークアップに分ける必要があります。機能マークアップは、何かが表示されるかどうかなどの論理的なものを制御し、プレゼンテーションマークアップはそれを表示する方法を決定するだけです。ページが飛び交うのを避けるために、機能的なCSSをインラインに配置することに問題はありません。

于 2009-10-06T06:13:34.660 に答える
2

display：noneルールをスタイルシートの一番上に移動して、解析されるいくつかの最初または最初になるようにすることをお勧めしますが、正直なところ、実際には、所有しているhttpリクエスト/メディアリソースの数によって異なります。

end bodyタグの前にjsをスローして、cssが一番上にあることを確認してみてください。これらの要素を非表示にする、cssスタイルシートが最初にリンクされています。

于 2009-10-06T06:01:25.420 に答える
0

ブラウザによって異なります。Opera、WebKit、KonquerorはCSSとJavaScriptを並行してロードします（ただし、すべてのCSSは適用される前にロードされます）。

display:noneが最善の解決策ですが、特に注意が必要な場合は、ページに直接読み込まれるinline-css（説明のように）を使用できますが、これは悪い習慣です。

于 2009-10-06T06:06:22.007 に答える