这个无限滚动脚本中发生了什么? [英] What's going on in this infinite scrolling script?

问题描述

我发现了这个无限滚动脚本.它有效，但是我不明白这一行:

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

当我将其更改为以下内容时:

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

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

解决方案

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

在此定义了一些jQuery函数. 第一个是:

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

每次滚动到最底部时，这就是调用我们的页面(目标)的页面.实际上，它仅定义一次，因此，如果给定$(#targetDiv").children().size()之类的参数，它将使用一次并将每次将第一个值放入目标中.

这个想法是传递一个参数，该参数将在javascript(此处为jQuery)中用于更新值:一个函数；

基本上，您只需要这样做:

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

每次使用该函数都会计算返回值.

希望这会有所帮助，请原谅我可怜的英语.

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

解决方案

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.

这篇关于这个无限滚动脚本中发生了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！