0

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

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

我的实现:http: //jsfiddle.net/jsuHD/

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

        });
4

1 回答 1

0

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

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

 //load the html from external resource
'contentPage': 'http://dl.dropbox.com/u/4001846/sample.html'
于 2013-04-08T15:59:42.260 回答