这个无限滚动的脚本中发生了什么？

Question

我发现了这个无限滚动脚本。它有效，但我不理解这一行：

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

当我将其更改为这样的内容时：

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

每次值都是相同的。在我的示例中，当我在 afterLoad 部分中调用 alert(($('#content').children().size())) 时，该值是正确的（每个滚动事件都不同）。我不明白如何将 contentData 设置为不同的值（例如第一次加载时为 10，第二次加载时为 20，等等）。

这是我的脚本：

$(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;
        });
    };
});

Answer 1

我刚刚使用这段代码并遇到了同样的问题。然后我在我们使用的 .js 文件中寻找答案：scrollpagination.js

在这个文件中定义了一些 jQuery 函数。
第一个是：

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

这是每次滚动足够底部时调用我们的页面（目标）的页面。事实上，它只定义一次，所以如果你给出像 $("#targetDiv").children().size() 这样的参数，它就会使用一次并每次将第一个值放入目标中。

这个想法是传递一个参数，该参数将在 javascript（这里是 jQuery）中使用来更新值：一个函数；

基本上你只需要这样做：

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

每次使用该函数时，它都会计算返回值。

希望这有帮助，请原谅我糟糕的英语。

Answer 2

如果您想跟踪脚本正在执行多少负载。试试这个：

$(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>