Implementing Infinite Scroll in existing website

Question

We are trying to implement infinite scroll in our existing website. Currently we have a image 'click for more' and it makes a ajax call to a method GetArticlesFromNextSection(true) which returns data which we append in #sectionArticles. And this works perfect.

Now we are trying to make it automatic as when user reaches at the end it should make a call to GetArticlesFromNextSection(true) method to load next chunk. Here is what we are using:

<script type="text/javascript">
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('#lnkShowMore1').trigger('click'); //click image or
            //GetArticlesFromNextSection(true);
        }
    });
</script>

The problem with above code is, it makes continuous call to method GetArticlesFromNextSection(true) until no data left to load from database. It should make a single call to method GetArticlesFromNextSection(true) and stop and when user tries to scroll again, it should next chunk.

How to make this possible?

EDIT

I used flag but it loads just one time and never again. This is not infinite loop, it should load another chunk again when user reaches end. This is what I used:

<script type="text/javascript">
    var is_loading = false;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {
            if (is_loading) {
                return;
            }
            is_loading = true;
            //$('div#more').show();
            $('#lnkShowMore1').trigger('click'); //click image or
            //GetArticlesFromNextSection(true);
            //$('div#more').hide();
        }
    });
</script>

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Take a look at the answers for How to rate-limit ajax requests?

You can either include and use Underscore's _.throttle() in your script, or take a look at how they implement it and adapt into your code instead of including the whole library for a single purpose.

EDIT:

Using Underscore, your code might look like this:

<script type="text/javascript">

$(window).scroll(_.throttle(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#lnkShowMore1').trigger('click'); 
    }
}, 1000));

... which should rate-limit the requests to once every second.

edited May 23 '17 at 11:56

Community

1
1

answered Apr 11 '14 at 08:33

Marc Kline

9,399
1
33
36

You may also want to check out http://underscorejs.org/#debounce and see which fits what you're looking for better – Marc Kline Apr 11 '14 at 08:45
I never used underscore before, this is how I used. added the reference of and then your suggested code, but it does nothing. – Abhimanyu Apr 11 '14 at 10:30
There was a typo in my code (I forgot a '.' between '_' and 'throttle' when attempting to call the function. I edited my answer with this correction. – Marc Kline Apr 11 '14 at 15:26
Note that my answer rate-limits the triggering of a click on your button and you may have to experiment with the timeout (currently set to 1000). @cesare's answer is another you might consider. The difference is that theirs will let the event handler fire whenever the ajax call has finished round-tripping, whereas mine prevents excessive calls using a flag and a timeout. You may want to try both and see which is more desirable. – Marc Kline Apr 11 '14 at 15:32

score 0 · Answer 2 · answered Apr 11 '14 at 08:50

0

You can set a flag that check if the content is loaded.

<script type="text/javascript">
$(window).scroll(function () {
    if (!isLoading && $(window).scrollTop() == $(document).height() - $(window).height()){
    isLoading = true;    
    $('#lnkShowMore1').trigger('click'); //click image or
        //GetArticlesFromNextSection(true);
    }
});
</script>

And inside Ajax callback sets

isLoading = false;

answered Apr 11 '14 at 08:50

cesare

2,098
19
29

I used flag but it loads just one time and never again. This is not infinite loop, it should load another chunk again when user reaches end. check edit above. – Abhimanyu Apr 11 '14 at 10:24
I think you have to set is_loading to false when the new content is appended at the document. – cesare Apr 11 '14 at 12:23
If I'm adding is_loading = false after new data appended, it again starts making continuous call. no help. – Abhimanyu Apr 14 '14 at 05:39
when the new data appended, the height of document have to be higher, so in theory, the if condition have to be false, i suggest you to try to debug with firebug what is the value of "$(window).scrollTop() == $(document).height() - $(window).height()" – cesare Apr 14 '14 at 08:23

Implementing Infinite Scroll in existing website

2 Answers2