Какой самый эффективный способ завершить бесконечную прокрутку при исчерпании контента? - PullRequest
Новая
       2

Какой самый эффективный способ завершить бесконечную прокрутку при исчерпании контента?

0 голосов
/ 12 марта 2012

У нас есть веб-приложение, в которое мы автоматически загружаем больше контента, когда достигаем нижней части страницы, например: 

$window
.on('scroll', function () {
    var 
        $this = $(this)
    ;
    if ($this.scrollTop() == $document.height() - $window.height()
        && $('#product-list').hasClass('has-more')) {
        // load more content
    }
})

В настоящее время мы используем класс has-more для родительского элемента, который удаляется, когда больше нет доступного контента.

Я не совсем удовлетворен подходом, любая идея?

Ответы [ 2 ]

1 голос
/ 12 марта 2012

Вместо того, чтобы удалять класс has-more, когда нет другого содержимого и (все еще) продолжать проверять его существование в событии прокрутки, почему бы не удалить сам обработчик события?

Таким образом, у вас нет обработчиков событий и нет решений, пока вы не связываете их снова, когда какое-то другое событие ajax сообщит вам, что теперь доступно содержимое.

1 голос
/ 12 марта 2012

Вы можете установить и проверить переменную в области видимости. Итак, ваш пример будет выглядеть примерно так: 

!function() {
    var hasMore = true;

    $window.on('scroll', function () {
        var $this = $(this);

        if ($this.scrollTop() == $document.height() - $window.height() && hasMore) {
            // load more content & set hasMore to false if applicable 
        }
    })
}();

Единственная проблема здесь - установка hasMore при загрузке страницы. Вместо того, чтобы делать то, что я делал (помещая это в самоисполняющуюся функцию), вы могли бы написать hasMore в нижнем колонтитуле. Это до вас.

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

...