Загружать содержимое jQuery при прокрутке вниз до 100 пикселей страницы, несколько событий

Я хочу, чтобы событие загружало больше контента, когда пользователь прокручивается и достигает почти нижней части страницы, скажем, около 100 пикселей снизу, проблема в том, что события срабатывают каждый раз, когда вы прокручиваете в нижнем 100px на странице, так что очевидная проблема, которая не может произойти по очевидным причинам, поэтому мне интересно, как я могу сделать это лучше всего, я проверил здесь другие ответы/вопросы, однако одно решение, которое частично работает, не соответствует тому, что Мне нужно это делать, и когда я пытаюсь изменить его так, как и он, он полностью замораживает мой браузер каждый раз.  это вопрос: Проверьте, прокручивается ли пользователь до конца

Ответ, который я смотрю, находится внизу, но вот код, который он предлагает:

$(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();
   }
});

как я уже сказал, это немедленно замораживает мой браузер, обязательную часть.

Ответ 1

У меня тоже была эта проблема. Я столкнулся с этой ссылкой , и это действительно помогло (и работало)!

Обновление: Я посмотрел на код, и я думаю, что когда вы перепроверяете, вам не хватает функции для повторной привязки к.

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

Ответ 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

Ответ 3

У меня была такая же проблема. Чтобы решить эту проблему, я использовал библиотеку underscore.js для предотвращения многократного запуска событий. Ссылка здесь. http://underscorejs.org/#throttle