Бесконечная прокрутка без ajax с использованием jquery?

Я хочу создать бесконечную прокрутку в мобильном веб-приложении jquery. Я хочу прокручивать страницу без использования ajax. Есть ли возможность это сделать?


html jquery jquery-mobile web-sql
person Ramasamy Kanna    schedule 18.11.2013    source источник
comment
Да, есть. используйте 1_   -  person roullie    schedule 18.11.2013
comment
Что вы подразумеваете под без использования ajax? если вам не нужен ajax, просто загрузите всю страницу.   -  person VahidNaderi    schedule 18.11.2013
comment
@VahidND Я сохранил данные в локальной базе данных (Websql), из которой я извлекаю и загружаю ... если есть 100 данных, загрузка за один раз занимает больше времени. Это то, что я пытаюсь использовать с бесконечной прокруткой без ajax.   -  person Ramasamy Kanna    schedule 18.11.2013

Ответы (1)


arrow_upward
4
arrow_downward

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

Например (не проверено, но чтобы дать вам представление):

HTML

<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>

JQuery

var $doc=$(document);
var $win=$(window);

// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
    return ($(this).scrollTop() > $doc.height());
}).hide();

var DATA_INCREMENT=5;

$(window).scroll(function(){
    // test if at the bottom
    if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
        // show the <DATA_INCREMENT> (5) next hidden data tags
        $('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
    }
});

Надеюсь это поможет.

person Frederik.L    schedule 18.11.2013