0

スクリプトは正常に動作していますが、コンテンツが終了するとページが最後まで到達しません。ロードされたコンテンツが終了したときに無限スクロールを停止する必要があります。

別の質問ですが、すべての div をすぐにロードしたくありません。5 分の 5 ごとにロードする必要があります。

js:

if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }

html:

<div id="postswrapper">
   <div class="item">content</div>
   ...
   <div id="loadmoreajaxloader" style="display:none;"><center><img src="bigLoader.gif" /></center></div>
</div>

そしてloadmore.phpには多くのものが含まれています<div class="item">content</div>

4

1 に答える 1

0

ここでは、最初に、スクロールリスナーを使用して提供したコードを呼び出しているという2つの仮定を立てています。次に、後で同じコードを呼び出したい場合があります。

それを停止するには、呼び出しを停止するようにフラグを作成する必要があります（または、後で同じものを使用したくない場合は、スクロールのバインドを解除します）。結果をページ分割するには、実際に表示しているページをカウントする変数を作成する必要がありますただし、送信するページデータを使用するようにajaxリクエストを処理するコードを変更する必要もあります。

flag = true; //Flag to identify if the code should request more results
page = 1;    //Current page 
$(document).scroll(function(){
    if(flag && ($(window).scrollTop() == $(document).height() - $(window).height()))
            {
            $('div#loadmoreajaxloader').show();
            $.ajax({
            url: "loadmore.php",
        data: {page:page}
            success: function(html)
            {
               if(html)
               {
                   $("#postswrapper").append(html);
                   $('div#loadmoreajaxloader').hide();
                   page++; 
               }else
               {
                   flag = false;
                   $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
              }
            }
        });
    }
});
于 2013-01-23T05:48:10.480 に答える