0

ウェブサイトに無限スクロール機能を実装しようとしています。複数の div '.book' を含む div '#books' があります。これまでのところ、これはうまく機能しています：

alreadyloading = false;
nextpage = 1;

$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
    if (alreadyloading == false) {
        var url = "page"+nextpage+".html";
        alreadyloading = true;
        $('#books').append($('#loadinggif').fadeIn(200));
        $.post(url, function(data) {
            $('#books').append(data);
            alreadyloading = false;
            nextpage++;
            $('#loadinggif').fadeOut(200);
        });
    }
}
});

ただし、すべてのコンテンツが読み込まれた後でも #lodinggif は一番下に残ります。pagex.html が存在しないことを検出して #loadinggif を非表示にする方法はありますか?

4

2 に答える 2

1

サーバーは、データに加えてこの情報を提供する必要があります。そのため、サーバーがデータと次のページが実際に存在するかどうかを含む XML または JSON ファイルを返すようにすることができます。

于 2012-03-22T06:17:11.777 に答える
1

jQuery.post()のドキュメントを読むと、コールバックについて次のように書かれています。

success(data, textStatus, jqXHR)
リクエストが成功した場合に実行されるコールバック関数。

したがって、でエラー状態をキャッチすることはできません$.post。しかし、投稿の省略形の代わりに長い形式のjQuery.ajax()を使用することで、それらをキャッチできます。

$.ajax({
    url: url,
    type: 'post',
    success: function(data, textStatus, jqXHR) {
        $('#books').append(data);
        nextpage++;
        alreadyloading = false;
        $('#loadinggif').fadeOut(200);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alreadyloading = false;
        $('#loadinggif').fadeOut(200);
    }
});
于 2012-03-22T06:18:52.563 に答える