Question

我发现了infinite scroll script。它有效，但我不理解这一行：

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

当我把它改成这样的东西时：

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

每次都是相同的值。在我的示例中，当我在alert(($('#content').children().size()))部分中调用afterLoad时，值是正确的（在每个不同的滚动条上）。我不明白如何将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){...}

这是每次滚动到底部时调用我们的页面（目标）的那个。实际上这只定义了一次，所以如果你给出像$（＆＃34; #targetDiv＆＃34;）。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>

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

2 个答案: