How do I stop infinite scrolling?

Question

I have django pagination and infinite scroll waypoint. I want to load pictures by clicking on the ".loading" button and then stop the infinite scroll waypoint so as not to load all the pictures at once.

That is. I clicked on the "Load more" button, for example 10 pictures loaded, scrolled down to the button, clicked again and so on. There can be an infinite number of pictures. I want infinite scroll on button.

JS

jQuery(window).on('load', function(){
    var container = $('#gallery');

    container.imagesLoaded(function () {
        container.masonry({
            itemSelector: '.item-masonry',
            percentPosition: true,
            transitionDuration: '0',
        });
    });

    const btn_load = document.querySelector('.loading')
    
    btn_load.onclick = function() {
        btn_load.classList.add('_active');

        if (btn_load.classList.contains('_active')) {
            var infinite = new Waypoint.Infinite({
                element: $('.infinite-container')[0],
                container: 'auto',
                items: '.infinite-item',
                more: '.infinite-more-link',
                offset: 'bottom-in-view',
                loadingClass: 'infinite-loading',
                onBeforePageLoad: function() {

                },
                onAfterPageLoad: function() {
                    btn_load.classList.remove('_active');
                    container.masonry('reloadItems');
                    container.imagesLoaded().progress( function() {
                        container.masonry('layout');
                    });
                },
            });
        };
    };
});

My problem is that after clicking on the button, the infinite scroll does not stop, despite the fact that the button no longer has the "_active" class.

How do I stop infinite scrolling?

0 Answers0