13

ユーザーがスクロールしてページのほぼ下部、たとえば下部から約100ピクセルに到達したときに、イベントがより多くのコンテンツをロードするようにしたいのですが、問題は、ページの下部100ピクセルをスクロールするたびにイベントが発生することです。明らかな理由で、これは起こり得ない明らかな問題です。どうすればこれを最善にできるのか疑問に思います。ここで他の回答/質問を確認しましたが、部分的に機能する1つの解決策は必要なものに適合しません。やろうとすると、変更しようとすると、毎回ブラウザが完全にフリーズします。これが質問です： ユーザーが一番下までスクロールしたかどうかを確認します

私が見ている答えは一番下にありますが、彼が提案するコードは次のとおりです。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

私が言ったように、これは機能し、複数のイベントが発生するのを防ぎます。問題は、イベントを無限に発生させる必要があることです。たとえば、一番下に到達したときに100行の情報をロードしますが、まだ1500行あります。 、すべての量の情報をロードするために毎回繰り返す必要があります（毎回ページの下部100pxの部分に到達したら）

だから私がやろうとしたことは：

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

私が言ったように、これは毎回すぐに私のブラウザをフリーズさせます、バインディング部分。

4

3 に答える 3

37

私も同じ問題を抱えていました。私はこのリンクに出くわしました、そしてそれは本当に役に立ちました（そして働きました）！

更新：コードを確認しましたが、再バインドすると、再バインドする関数が欠落していると思います。

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);
于 2012-11-05T17:56:39.740 に答える
2

これはあなたを助けます。

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

記事全体と複数のイベントを発生させる方法の詳細については、このリンクを参照してください。

ブラウザがjqueryでページの最後までスクロールすると、より多くのコンテンツが読み込まれます

于 2013-05-28T12:49:40.667 に答える
0

私も同じ問題を抱えていました。これを解決するには、underscore.jsライブラリを使用して複数のイベントが発生しないようにします。ここにリンクがあります。http://underscorejs.org/#throttle

于 2013-08-19T21:54:37.043 に答える