4

良い一日

質問：プロパティを与えるとき

display: none;

divに、ブラウザは引き続きすべてのコンテンツをロードしますか？それとも一度だけ表示しますか？

私が達成したいのは、多くのWebページを1つにまとめることです。ユーザーを毎回新しいページに誘導するのではなく、クリックしたアイテムに関連するdiv（ページの読み込み時に非表示）を表示するだけです。

今私の質問は、以前は別々のWebページにコンテンツであったこれらすべての非表示のdivがある場合、divは非表示になり、呼び出されたときにのみロードおよび表示されるため、最初のページの全体的な読み込みが遅くなるか、影響を受けないかということです。？

私のひざまずく反応は、ブラウザがサーバーによって提供されるすべてのものをロードし、cssルールを受信したときにdivを非表示にすることです...ロードはすでに完了しています

その場合、どのようにしてユーザーを1つのページに効率的に留めながら、すべてのコンテンツのために読み込み時間を最小限に抑えることができますか？

更新：AjaxまたはjQueryを使用して、最初にロードしたくないコンテンツを追加できますか？しかし、jQueryを使用する場合でも、コンテンツはjQuery関数内で定義する必要があり、それも最初に読み込まれます...？

シナリオは次のとおりです。

HTML（初期）

<div>
inital content that I want loaded initially
<a>Action to call hidden content I don't want loaded initially<a/>
</div>

jQuery：

$('div a').click(function(){
   $('div').append('<div>new content that I don;t want loaded initially....</div>');
});

ただし、上記の新しいコンテンツはjQueryモデルに含まれているため、引き続き読み込まれます...

私はここでこれを間違っていますか？

ありがとうございました

4

6 に答える 6

3

HTMLページの場合、リクエストが行われるとページ全体がサーバーによって提供され、ブラウザのレンダリング中にページが非表示になります。

遅延読み込みが必要な場合は、AJAX テクノロジを検討する必要があります。

ajax を使用すると、必要に応じてコンテンツをロードし、dom に追加できます。

ブラウザーが提供する未加工の AJAX API を使用する代わりに、 ajax 呼び出しとdom 操作を行うクロスプラットフォーム サポート フォームを提供するjQueryなどのライブラリを見ることができます。

元：

$.ajax({
    url: 'my-content-url',
    method: 'GET'
}).done(function(html){
    $('#my-container').html(html)
})

この例では ajax 呼び出しをmy-content-url行い、正常に完了すると、返された html が id の要素に追加されmy-containerます。

于 2013-03-22T08:15:06.810 に答える
2

あなたの質問には、はい、CSS Display:noneDOM 内のすべてのコンテンツをロードします。読み込み時間を最小限に抑えるには、AJAX を使用することをお勧めします。最初は、非表示のコンテンツをロードしないでください。ユーザーが非表示のコンテンツを表示するように要求した場合、ajax (私は jQuery AJAX を好みます) を使用して、コンテンツをロードする必要があります。これにより、ページの読み込みが減少します。ただし、AJAX リクエストが原因で読み込みに遅延が生じる場合があります。

于 2013-03-22T08:17:26.643 に答える
1

ブラウザは、非表示になっている HTML をすべてダウンロードします。あなたがしていることの通常のパターンは、AJAX 経由で他のコンテンツをロードしてから表示することです。

于 2013-03-22T08:14:46.893 に答える
1

ページが読み込まれると、 hide であってもすべての HTML コンテンツが読み込まれます。削除されていないだけです。

そのため、Ajax を介してコンテンツをロードし、表示したい場所に表示することをお勧めします。

于 2013-03-22T08:17:01.013 に答える
0

ブラウザは、表示されているかどうかに関係なく、すべての div を読み込みます。サイトをすばやく読み込みたい場合は、不要な div を削除するか、コンテンツから div を非表示にしてください

于 2013-03-22T08:18:05.693 に答える