Question

我正在创建一个简单的小网站，为Reddit帖子应用不同的格式化样式，我正在尝试添加无限滚动jQuery插件，但它没有做任何事情。我尝试按照无限滚动页面上的（非常简单的）指令，当它没有做任何事情时我认为我必须输入错误的东西，但后来我只是复制/粘贴了Masonry / Infinite-Scroll中的代码{{ 3}}它仍然没有用。砌体工作完美（最后）但我无法弄清楚无限滚动有什么问题。我理解jQuery和JavaScript的基础知识，但显然没有大多数人那么多，所以请你帮帮我，让我知道什么是错的？我的网站正在example上线。

非常感谢你们，到目前为止，你们很少让我失望。

YM

编辑：如果没有足够的图片填满主页上的页面，请访问reddit.ymindustries.com以获取更多图片。

编辑2：我相信我找到了问题，这里有描述：reddit.ymindustries.com/r/aww 现在想出一个修复...

编辑3：添加了一点点黑客以使它有点工作，但它似乎现在无休止地循环第二页。嗯...

Answer 1

查看这篇文章，做一个简单的无限滚动jquery脚本。有时使用复杂的插件比开发自己需要更多的时间。 http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 2

我认为你的问题实际上是css。使您的页面更长客户区高度。将更多图像添加到$ container

点是，$ container的botom边缘需要通过窗口的底部，因此滚动事件会触发，因此无限滚动可以对此事件作出反应并计算天气是否达到边缘

BTW，在相同的情况下，例如，当我缩小窗口时，你设置的例子正在工作。

=== UPDATE ===

我找到了一些时间玩infinitescroll，这是最终的工作脚本，只需在脚本中设置pathParse方法

$(function () {

        var $container = $('#itemContainer');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector:'.item'
            });
        });
        $container.infinitescroll({
                    navSelector:'.navigation', // selector for the paged navigation
                    nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
                    itemSelector:'.item', // selector for all items you'll retrieve
                    bufferPx:40,
                    debug:true,
                    columnWidth:function (containerWidth) {
                        return containerWidth / 5;
                    },
                    loading:{
                        finishedMsg:'No more pages to load.',
                        img:'http://i.imgur.com/6RMhx.gif'
                    },
                    pathParse: function(path,page){
                        return $(this.nextSelector).attr("href");
                    }
                },
                // trigger Masonry as a callback
                function (newElements) {
                    // hide new items while they are loading
                    var $newElems = $(newElements).css({ opacity:0 });
                    // ensure that images load before adding to masonry layout
                    $newElems.imagesLoaded(function () {
                        // show elems now they're ready
                        $newElems.animate({ opacity:1 });
                        $container.masonry('appended', $newElems, true);
                    });
                    //console.log("test (never fired :( )");
                }
        );

    });

现在，由于您的下一个链接不会自动更新（http://reddit.ymindustries.com/?after=t3_yh4av），您需要更改回调以从ajax响应中提取最后一个元素并更改下一个链接......可能是这样的

function (newElements) {
                        // hide new items while they are loading
                        var $newElems = $(newElements).css({ opacity:0 });
                        // ensure that images load before adding to masonry layout

                        // ======> if query parameter after=... is caring filename then do this
                        var lastImageUrl= $newElements[$newElements.length-1].attr("src");
                        var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
                        $("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);

                        $newElems.imagesLoaded(function () {
                            // show elems now they're ready
                            $newElems.animate({ opacity:1 });
                            $container.masonry('appended', $newElems, true);
                        });
                        //console.log("test (never fired :( )");
                    }

Answer 3

你还需要照顾你使用的无限滚动版本，因为如果你使用砌体/同位素（版本2.0b2.110713）附带的那些，两者都需要一点点黑客来调用函数和不使用预定义的数组：

//old code, to be changed (line 489)
desturl = path.join(opts.state.currPage);
// new code
desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);

这已在较新版本的infinite-scroll

中修复

Answer 4

我遇到了与jQuery相同的问题＆＃34; infinitescroll＆＃34;和砌体。您可以通过为页面提供更多初始项目来解决此问题，以便插件的滚动检测能够启动。

在WordPress中，这是在＆＃34;阅读＆＃34;设置。默认情况下，WordPress一次只能打开10个项目。您可以将该数字增加到100 /页，以确保窗口最初会满。我在这里有一些代码非常可怕，结果我只需要更长的页面，而不是更多的代码。

如果您没有足够的图像，那么在大型显示器上测试这些插件很困难。也许解决方案是在大型显示器上扩大图像尺寸，这样您就可以更加确定将内容放在首位。

如果您认为有人可能会使用非常大的显示屏访问您的网站，我不确定答案是什么，而不是显示更多项目/页面，并且可能会将$('#masonry').infinitescroll('retrieve');添加到您的页脚以加载额外页面以防万一。

jQuery无限滚动不触发

4 个答案: