Web サイトに 2 つの div パネル (left_panel と right_panel) があります。左のパネルには何百もの食品があり、右のパネルには注文の小さなボックスがあり、ユーザーが左のパネルから追加したアイテムの数を確認できます。現在の問題は、ページが読み込まれるときです。左側のパネルはデータベースからデータを取得するのに時間がかかり、完全に読み込まれると右側のパネルが表示されます。ウェブサイトで左側のパネルやその他のものの前に右側のパネルを最初にロードできる jquery はありますか?
6 に答える
そこにあるものはほとんどありません
左のパネルには何百もの食品があり、右のパネルには注文の小さなボックスがあり、ユーザーが左のパネルから追加したアイテムの数を確認できます。
ページネーション、提案/推奨、または検索を使用して、ここでのデータの一部の読み込みを遅らせることができます。ユーザーは何百ものレコードから必要なアイテムをスカウトする非常に楽しい経験をすることはありません
ページがロードされます 左パネルはデータベースからデータを取得するのに時間がかかります
データベースからのレコードのフェッチは、後で XHR/Ajax リクエストから延期しない限り、html がレンダリングを開始するときにすでに行われています。AJAX 経由で実行された場合でも、同時に実行されるため、他の DOM 要素の読み込みに深刻な影響を与えることはありません。
私は...するだろう:
- 最初に右側のパネルをロードします。
- 左パネルを AJAX 経由で読み込み、ページネーションまたはライブ検索機能を実装します。
最初に右の列を非表示にし、コールバックを ajax 関数 (またはコンテンツをロードするもの) に配置して、右の列を表示します。
メインページが読み込まれた後、左のコンテンツを読み込むために AJAX を使用することをお勧めします。基本的なコンセプトは、ページのコア HTML として空の左パネルとデータを含む右パネルを用意することです。次に、ページがブラウザーに読み込まれるときに、AJAX (jQuery.load) を使用して左側の列のコンテンツを取り込みます。
$(document).ready(function() {
$("div").show();
});
そしてCssでdiv rightを隠しました
それとも ajax で左にロードし、終了したら div を右に表示しますか?
$.ajax({
url: "test.php",
//stuff
}).done(function() {
$("#rdiv").show();
});
$(function)() {
$("#left").load("leftcontent.html");
});
<div id="right" style="float:right">....</div>
<div id="left"></div>
ロードしようとしている div でメソッドを使用し.load(callback)
、ページの残りの部分をレンダリングする関数をコールバックに配置すると、必要なことが行われます。これは、URL に基づいてデータをロードするものとは異なる jQuery ロード メソッドであることに注意してください。