[解決済み] jQuery スクロール時にデータを多く読み込む

質問

div.loadingが表示されているときだけ、スクロール時にデータを増やすにはどうしたらいいでしょうか？

通常、ページの高さとスクロールの高さを調べて、より多くのデータをロードする必要があるかどうかを確認します。しかし、次の例は少し複雑です。

次の画像は完璧な例です。ドロップダウンボックスの上に2つの .loading div があります。ユーザーがコンテンツをスクロールすると、表示されているほうのデータの読み込みを開始します。

では、.loading div がまだユーザーに見えているかどうかを調べるにはどうしたらよいでしょうか。そうすれば、その div に対してのみデータの読み込みを開始することができます。

どのように解決するのですか？

jQueryで、scroll関数を使ってページの最下部に到達したかどうかを確認します。最下部に到達したら、ajaxを呼び出し（ここではajaxの応答があるまでローディング画像を表示することができます）、次のデータセットを取得し、それをdivに追加してください。 この関数は、ページを再びスクロールするときに実行されます。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});