web-dev-qa-db-ja.com

ページの下100pxにスクロールすると、jQueryがコンテンツをロードし、複数のイベントが発生する

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

私が見ている答えは一番下にありますが、ここに彼が提案するコードがあります：

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

今言ったように、これは機能し、2つ以上のイベントが発生するのを防ぎます。問題は、無限の量のイベントを発生させる必要があることです。たとえば、一番下に到達したときに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();
   }
});

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

javascriptjquerypaginationscroll
11
Dylan Cross

私も同じ問題を抱えていました。私はこれに出くわしました link そしてそれは本当に助けました（そして働きました）！

Update：コードを確認したところ、再バインドすると、再バインドする関数が不足していると思います。

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);
35
JoeFletch

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

<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でブラウザがページの終わりまでスクロールしたときに、より多くのコンテンツをロードします

3
Rohit

同じ問題がありました。それを解決するために、私はunderscore.jsライブラリを使用して、複数のイベントが発生するのを防ぎます。こちらがリンクです。 http://underscorejs.org/#throttle

0
Filix Mogilevsky