Как передать данные в плагин Infinite Ajax Scroll? - PullRequest
Новая
       14

Как передать данные в плагин Infinite Ajax Scroll?

0 голосов
/ 14 декабря 2018

Я использую плагин Infinite AJAX Scroll .

Я прочитал документ на веб-сайте и видел довольно много вопросов по SO, думаю, я понимаю, что содержаниезагружается благодаря изменению URL при прокрутке.С помощью следующего фрагмента, похоже, он очень хорошо работает для загрузки второй страницы. 

<div id="container">

    {% for post in posts %}
        <div class="post" style="height: 250px; background-color: rgba(0,0,0,0.2)">{{ post.title }}</div>
    {% endfor %}

</div>

<div id="pagination">
    <a href="" class="prev">prev</a>
    <a href="/posts/2" class="next">next</a>
</div>

Js part: 

<script type="text/javascript">
    var ias = jQuery.ias({
        container:  '#container',
        item:       '.post',
        pagination: '#pagination',
        next:       '#pagination a.next',
    });

    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASTriggerExtension({offset: 10}));
    ias.extension(new IASPagingExtension());
    ias.extension(new IASHistoryExtension({prev: '#pagination a.prev'}));

    ias.on('loaded', function () {
        let href = $('a.next').attr('href');
        $('a.next').attr('href', '/posts/' + (parseInt(href.split('/')[2]) + 1));
    });
</script>

Однако, href не обновляется, поэтому у меня естьсделать функцию обновления до /posts/3 после загрузки /posts/2 и т. д.?Кажется немного разочаровывающим, что это не делается автоматически.

В любом случае, я сделал это, и это работает (это последние четыре строки скрипта), но плагин все еще не загружает страницу 3, этопросто останавливается в конце страницы 2, даже не отображая загрузку GIF.Кто-нибудь знает, как заставить этот плагин работать?(или лучший плагин, SEO-дружественный, если это возможно?)

Php сторона в порядке, я тестировал его без IAS.

1 Ответ

0 голосов
/ 14 декабря 2018

попробуй: 

var page = 0;
$(window).scroll(function(){
    if ( $(window).scrollTop() + $(window).height() == $document().height() ) {
        page++;
        ajax(page);
    }
})

function _ajax(page){
 // coce     
}
...