Что происходит в этом сценарии бесконечной прокрутки? - PullRequest
Новая
       3

Что происходит в этом сценарии бесконечной прокрутки?

2 голосов
/ 16 ноября 2011

Я нашел этот скрипт бесконечной прокрутки . Это работает, но я не понимаю эту строку: 

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

Ответы [ 2 ]

4 голосов
/ 21 декабря 2011

Я только что работал с этим фрагментом кода, и у меня возникла та же проблема. Затем я искал ответ в используемом нами файле .js: scrollpagination.js

В этом определены некоторые функции jQuery. И первое: 

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

Это тот, который вызывает нашу страницу (цель) каждый раз, когда свиток находится в нижней части. На самом деле это определяется один раз и только один раз, поэтому, если вы дадите аргумент типа $ ("# targetDiv"). Children (). Size (), он примет это один раз и каждый раз будет помещать первое значение в цель.

Идея состоит в том, чтобы передать аргумент, который будет использоваться в javascript (здесь jQuery) для обновления значения: функция;

По сути, вы просто должны сделать это: 

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

И каждый раз, когда функция будет использоваться, она будет вычислять возвращаемое значение.

Надеюсь, это помогло, и прости, пожалуйста, прости мой плохой английский.

1 голос
/ 16 ноября 2011

Если вы хотите отслеживать, сколько загрузок выполняет ваш скрипт. Попробуйте это: 

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