Question

我正在尝试使用jsfiddle中的javascript实现无限滚动分页，但我遇到了让它正常工作的问题。我没有看到滚动时的淡入淡出，当我到达内容的结尾时，我应该得到的消息是没有更多数据，而是说它正在等待更多数据。

原始示例：http://andersonferminiano.com/jqueryscrollpagination/

我在jsfiddle中添加了一个外部资源：scrollpagination.js

我认为我的问题在于javascript而不知道要传递给contentPage

的内容

$(function(){
            $('#content').scrollPagination({
                'contentPage': 'http://jsfiddle.net/jsuHD/', // the url you are fetching the results
                'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
                'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                'beforeLoad': function(){ // before load function, you can display a preloader div
                    $('#loading').fadeIn();
                },
                'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                     $('#loading').fadeOut();
                     var i = 0;
                     $(elementsLoaded).fadeInWithDelay();
                     if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                        $('#nomoreresults').fadeIn();
                        $('#content').stopScrollPagination();
                     }
                }
            });

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

        });

Answer 1

如果您启动控制台 [谷歌浏览器中的f12] ，您会看到当您到达页面末尾时，向 403禁止请求jsFiddle本身。是的我认为问题在于你传递给contentPage的内容。

这是您的解决方案的工作小提琴http://jsfiddle.net/jsuHD/10/。当您从外部源加载html时，它允许您获得所需的资源，它可以按预期工作。

 //load the html from external resource
'contentPage': 'http://dl.dropbox.com/u/4001846/sample.html'

无限滚动分页javascript实现问题

1 个答案: