これは私のウェブサイトで無限スクロールのシステムを作成する正しい方法ですか？

Question

私は最近、SQL、Ajax、および（オブジェクト指向の）PHPの基礎を学びました。これは、ユーザービルドの情報フィードを作成することで使用しました。しかし、現在のところ、フィードはデータベース内の最新の20個の記事だけを読み込みます（すべてのページを一度に読み込むと、ページの読み込み時間に悪影響を与えます）。

私は、無限スクロールのシステム（TwitterやFacebookで使用されている方法に似ています）を実装しようとすると、この問題に対する最良の解決策になると判断しましたが、これを行う方法が完全にはわかりません。

最初に必要なのは、ユーザーがページの下部に到達したかどうかを確認する機能です。コードのこのビットは、動作するはず

$(window).scroll(function() { 
    var scrollBottom = $(document).height() - $(document).scrollTop() - $(window).height(); 
    if(scrollBottom < 200) { 
     // send Ajax request 
    } 
    }); 

が、私は、ユーザーが前に複数回をスクロールする場合は、サーバーに送信されている複数のAjaxリクエストのリスクが心配です：これを行うために、私は次のような単純なjQueryのを書きました投稿のフィードが更新されました。

次は私がする必要があるのは、Ajaxリクエストを送信することです。当然のことながら、現在のデータベース内の最初の20件の記事を取得するスクリプトが

$query = "SELECT * FROM table DESC LIMIT 0,20"; 

のように見えるPHP/SQLの行を使用しています私は

$query = "SELECT * FROM table DESC LIMIT " . $x . "," . $x+20; 

のようなものでこれを交換する必要があると推測していますAjaxリクエストが何回送信されたかを追跡する別のスクリプトを作成し、これを使用して正しい結果が取得されるように変数$ xを決定します。

最後に、フェッチされたポストを表示するためのコールバック関数を作成する必要があることがわかりました。

これは、無限スクロールのシステムを作成するために使用する正しい（最良の）方法ですか？ また、jQueryを変更して、複数のリクエストを送信しないようにするにはどうすればよいですか？

Answer 1

はい、あなたが探しているものは、$xが更新されるまで、次の20行を取得し、より多くのものを取得する必要があります$query = "SELECT * FROM table DESC LIMIT " . $x . ", 20";です。