0

I have api of listings that returns me data page wise. I have implemented infinite scolling for the listings.

What I am currently using to do is:

if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
                    console.log("Scroll Postion" + $(window).scrollTop());
                    //API HIT
                }

This works like a charm but the problem is that user has to scroll till the absolute bottom of the page to hit api.

What we want to achieve is - when user is at 75% to 80% from the top of the page, api hit for next page should automatically go.

I tried using:

if ($(window).scrollTop() * 1.2 >= $(document).height() - $(window).height())

AND

if ($(window).scrollTop() + 100 >= $(document).height() - $(window).height())

But both of the approaches are hitting multiple api when we scroll to bottom of the page.

Any better solution for this?

YakovL
  • 7,557
  • 12
  • 62
  • 102
Sahil Sharma
  • 3,847
  • 6
  • 48
  • 98

1 Answers1

0

You can try this...

html code: Load More Loading...

        </div>
    </div>
</div>
</div>

javascript code: 

$(document).scroll(function(e) {
    if (elementInViewport(document.getElementById('load_more'))) {
        if ($('#test1').hasClass('ajax-loading')) {
            return;
        } else if ($('#test1').hasClass('stop-loading')) {
            $('#load_more').hide();
        } else {
            $('#test1').addClass('ajax-loading');
        }
        $('.ajax-loading-gif').show();
        your_api_call()
    }
});

function your_api_call(){
    $.ajax({
        type : 'POST',
        url : '/controller/method-name',
        data :'para1='+ paraval1,
        cache : false,
        dataType : 'json',
        beforeSend : function() {
        },
        success : function(data, textStatus, jqXHR) {
            var values=data.rows;
            if (values.length > 0) {
                //noOfPage = Math.floor((data.records/10)+1);
                console.log(values.length)
            //  your work

            }  else {
                $('#load_more').hide();
                $('#test1').addClass(
                        'stop-loading');
                $('.ajax-loading-gif').hide();
            }
            $('.ajax-loading-gif').hide();
            $('#test1').removeClass(
                    'ajax-loading');
        },
        error : function(xhr, ajaxOptions, thrownError) {
            alert('Some error occured')
        }
    });
}

    function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
    while (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }
    return (top < (window.pageYOffset + window.innerHeight)
            && left < (window.pageXOffset + window.innerWidth)
            && (top + height) > window.pageYOffset && (left + width) >
  window.pageXOffset);
}

</script>
sach4all
  • 51
  • 4