-1

データテーブルを見ると、この目標を達成できません。今のところ、（サーバー側を使用して）ajaxを使用して異なる行と異なる順序でそれらをさまざまな方法でロードできますが、今のところ、たとえば4回または5回で複数のリクエストajaxを作成して行をロードすることはできません（使用したいスクロールして少しずつ読み込みます）。

どうすればこれを行うことができますか？

4

1 に答える 1

3

ajax を変更して最初から x 行をロードし、最後のエントリの上部オフセットが表示されたら、同じファイルで別の ajax イベントを発生させることができますが、x を使用して最後の行が何であったかを知ることができます。どの行からロードを開始するかがわかるように、ロードする必要がありますか?

たとえば、最初に行 0 ～ 5 をロードし、5 が表示されると、同じ ajax を通過するイベントを発生させますが、値は 5 であるため、6 から開始して次の 6 行をロードします。最初の読み込みとその後の読み込みに同じ関数を使用でき、メイン要素の html に追加されるだけです。

編集 さて、データを取得してフォーマットする php ファイルと、ajax を含み、すべてを表示する html ファイルが必要になります。

php の場合、次のようになります。

$offset = 0;
$sql = "SELECT * FROM table ORDER BY id LIMIT 20, ".$offset;

次に、ループを実行して、行を希望どおりにフォーマットします。

これにより、最初はオフセットから 20 件の投稿がページに入力されます。デフォルトでは 0 です。

次に、Ajax には 2 つの部分があります。まず、最後の項目が表示されたときのアクションを作成します。

var go = true;
function hitbottom() {
    var sh = $(window).scrollTop();
    var wh = $(window).height();
    var ih = $('.item').last().offset().top;
    if ((sh+wh)<ih && go) {
        //run ajax
    }
}

これはスクロール時に実行して、最後のアイテムの上部が画面の下部に達したときにトリガーする必要があります。

2 つ目は、表示される最後の行の ID を知る必要がある ajax フォームを作成することです。その値を使用してphpファイルのオフセット変数の値を変更し、次の20行を取得してjqueryに送り返し、コールバックのhtmlに追加します...

ajax部分はgoをfalseに設定し、コールバックでtrueに戻して最初からやり直す必要があります。

データを追加するには、次のようなものを使用できます。

$('#element').append(data);

これはテストされておらず、単なるアイデアです。Facebook フィードの読み込み方法に似ていると思います。一番下に到達すると、読み込みアイコンがポップアップ表示され、次の一連の投稿が読み込まれます。これだけでも着底直前に読み込みが始まるので、すぐに下がらなければかなり早く新しいデータを引っ張ってくれるはずです。

これにより、一度に大量のコンテンツをロードして速度を低下させることなく、html ファイルのコンテンツを徐々に増やすこともできます。まだ限界があるかもしれませんが、かなり大きいはずです。

于 2013-10-21T19:37:47.330 に答える