What's going on in this infinite scrolling script?

问题

I found this infinite scroll script. It works, but I don't understand this line:

'contentData': {}, // you can pass the children().size() to know where is the pagination

when I change it to something like this:

'contentData': {xyz:($('#content').children().size())},

The value is the same every time. In my example, when I call alert(($('#content').children().size())) in the afterLoad section, the value is correct (on every scrollevent different). I don't understand how to set contentData to different values (like 10 on the first load, 20 on the second load, etc.).

Here's my script:

$(function(){
    $('#content').scrollPagination({
        'contentPage': '/democontent.php', // the page where you are searching for results
        'contentData': {xyz:($('#content').children().size())}, // you can pass the children().size() to know where is the pagination
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
        'beforeLoad': function(){ // before load, some function, maybe display a preloader div
            $('#loading').fadeIn(); 
        },

        'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
            $('#loading').fadeOut();
            var i = 0;
            $(elementsLoaded).fadeInWithDelay();
            alert(($('#content').children().size()));

            if ($('#content').children().size() > 10000){ // if more than 100 results loaded stop pagination (only for test)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
            }
        }
    });

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };
});

回答1:

I just worked with this piece of code and had the same problem. Then I looked for answer in the .js file we use : scrollpagination.js

In this some jQuery functions are defined. And the first is :

$.fn.scrollPagination.loadContent = function(obj, opts){...}

This is the one which call our page (target) each time the scroll is in the bottom enough. In fact this is defined once and only once, so if you give argument like $("#targetDiv").children().size(), it will take this once and put the first value in the target each time.

The idea is to pass an argument which will be used in javascript (here jQuery) to update the value : a function;

Basically you just have to do this :

'contentData': {xyz:function() {return $('#content').children().size()}},

And each time the function will be used it will calculate the return value.

Hope this helped, and forgive please forgive my poor english.

回答2:

If you want to keep track of how many loads your script is doing. Try this:

$(function(){
    var loads = 0;
    $('#content').scrollPagination({
        'contentPage': '/democontent.php?loads='+loads, // the page where you are searching for results
        'contentData': {}, // you can pass the children().size() to know where is the pagination
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
        'beforeLoad': function(){ // before load, some function, maybe display a preloader div
            $('#loading').fadeIn(); 
        },

        'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
             $('#loading').fadeOut();
             var i = 0;
             loads++;
             alert('Number of loads is now: '+loads);
             $(elementsLoaded).fadeInWithDelay();
                alert(($('#content').children().size()));
             if ($('#content').children().size() > 10000){ // if more than 100 results loaded stop pagination (only for test)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
             }
        }
    });

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };

});
</script>

来源：https://stackoverflow.com/questions/8151070/whats-going-on-in-this-infinite-scrolling-script

标签

javascript

jquery

infinite-scroll