Почему этот код автозагрузки нумерации страниц работает неправильно? - PullRequest
Новая
       33

Почему этот код автозагрузки нумерации страниц работает неправильно?

0 голосов
/ 13 декабря 2011

Я пытаюсь сделать некоторую нумерацию страниц, когда пользователь прокручивает страницу вниз, загружается больше контента.Есть ли способ сказать почти до конца страницы?Как, может быть, 1/3 от нижней части страницы? 

$(window).scroll(function(){
    if ($(window).scrollTop() == ($(document).height() - $(window).height())/3)
    {
        alert('test');
    }
    // ...

Это ничего не делает

Но если я удалю эти 3 в коде, появится предупреждение, когда я доберусь додно (тупик, больше не могу прокручивать).Но я хочу, чтобы предупреждение показывалось, когда я почти до дна.

Ответы [ 3 ]

2 голосов
/ 13 декабря 2011

Проблема в следующем:

  • Вы проверяете, равно ли оно точно .Это будет редкостью
  • Вы проверяете, если вниз по странице 1/3 rd , а не 2/3 rds

Попробуйте это - http://jsfiddle.net/y7Am2/:

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height()) * 2 / 3;
    if ($(window).scrollTop() >= mostOfTheWayDown)
    {
        alert('test');
    }
});

Но я рекомендую использовать определенное значение пикселя снизу, а не дробное значение сверху.Основывайте его на высоте нижнего колонтитула (простое значение, настроенное вручную, или рассчитанное).

Возможно, ваш контент не имеет постоянной высоты.Если нет, и вы используете дробное значение, вы перейдете к тому, что кажется произвольной частью страницы, и загрузка будет стоять в очереди.Это сделает ваш веб-сайт непредсказуемым или, возможно, менее отзывчивым, если пользователи привыкли загружать его ранее на более длинные страницы.

Поэтому вместо этого сделайте что-то подобное - http://jsfiddle.net/PwZ4D/:

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height())
        - 150 - footerHeight;
    // ...

Такжеобратите внимание, что в настоящее время ваше мероприятие будет продолжаться каждый раз, когда вы прокручиваете внизу страницы.Это поставит в очередь целую тонну вызовов AJAX.Вам, вероятно, следует отсоединить scroll внутри своего события, а затем повторно связать его, когда ваш вызов ajax успешно завершится.

И будьте осторожны, обрабатывая случаи, когда у вас мало или совсем нет контента.Если страница пуста или данных достаточно для заполнения одного экрана, она может продолжать без необходимости повторно запрашивать сервер, если вы что-то делаете неправильно.

Редактировать:

По запросу вы отменяете событие scroll с помощью кода, подобного следующему: http://jsfiddle.net/5vXJ5/:

$(window).unbind('scroll');

Редактировать:

Снова по запросу вы перепривязываететак же, как вы связали это для начала.Тем не менее, поскольку вы в конечном итоге получаете самоссылочный код, вам нужно назвать свою функцию.Окончательный код может выглядеть примерно так: 

var scrollHandler;
scrollHandler = function(){
  var mostOfTheWayDown = ($(document).height() - $(window).height()) * 2 / 3;

  if ($(window).scrollTop() >= mostOfTheWayDown)
  {
    // So we don't queue up multiple requests until the first one completes
    $(window).unbind('scroll');

    $.ajax({
      url: "test.html",
      context: document.body,
      success: function(){
        $(window).scroll(scrollHandler); // re-bind after it completes
      }
    });
  }
};

$(window).scroll(scrollHandler); // bind by named function

Это всего лишь пример.Вам придется настроить его в соответствии с вашим конкретным сценарием.

0 голосов
/ 13 декабря 2011

Вы можете использовать плагин, например

Бесконечный свиток или Бесконечный свиток

Или просто написать свой собственный 

$(window).scroll(function () { 
   if ($(window).scrollTop() >= ($(document).height() - $(window).height()) - 100) {
      console.log('load more!')
   }
});
0 голосов
/ 13 декабря 2011

Я думаю, что приведенный ниже расчет должен быть более правильным для того, что вы ищете для случая window.scrollTop max is document.height - window.height: 

$(window).scrollTop() = $(document).height() - $(window).height() - $(window).height())/3
...