jQuery无限滚动未触发

Posted 2023-05-07

【中文标题】jQuery无限滚动未触发

【英文标题】：jQuery infinite-scroll Not Triggering

【发布时间】：2012-08-14 16:32:15

【问题描述】：

我正在制作一个简单的小网站，以将不同的格式样式应用于 Reddit 帖子，我正在尝试添加无限滚动 jQuery 插件，但它没有做任何事情。我尝试按照无限滚动页面上的（非常简单的）说明进行操作，当它没有执行任何操作时，我认为我一定输入了错误的内容，但后来我只是复制/粘贴了 Masonry/Infinite-Scroll @987654321 中的代码@它仍然没有工作。砌体工作完美（最终），但我无法弄清楚无限滚动有什么问题。我了解 jQuery 和 javascript 的基础知识，但显然不如你们大多数人那么了解，所以请你帮我看看有什么问题吗？我的网站位于reddit.ymindustries.com。

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

YM

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

编辑 2：我相信我找到了问题，这里描述：https://github.com/paulirish/infinite-scroll/issues/5 现在想办法解决...

编辑 3：添加了一些技巧以使其正常工作，但它现在似乎无休止地循环第二页。嗯……

【问题讨论】：

您的网站可能有一天会宕机，这个问题可能对后代完全没用

在大型显示器的屏幕上，即使是常规滚动也没有足够的项目来启动。无限滚动用于将新元素附加到#container - 随着更多元素被附加到它，它会变得越来越长它超过了窗口底部。

@Systembolaget 没错，您发现了我的问题。我在下面发布了一个解决方案。

【参考方案1】：

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

重点是，您的 $container 的底部边缘需要通过窗口底部，以便触发滚动事件，以便无限滚动可以对此事件做出反应并计算天气或未达到边缘

顺便说一句，在相同的情况下，例如，当我缩小窗口时，您设置的示例正在运行。

=== 更新 ===

我找到了一些时间来玩无限滚动，这是最终的工作脚本，只需在脚本中设置 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 :( )");
                    

【讨论】：

我添加了更多图像（数量翻倍），所以我的滚动条现在走得很远，然后我也尝试缩小浏览器窗口，但仍然没有触发无限滚动。页面底部的导航部分也没有被隐藏。

看起来无限滚动有选项“debug:true”，请将其添加到您的脚本中，它可能会输出类似“抱歉，我们无法解析您的下一篇（上一篇文章）URL。验证您的css 选择器指向正确的 A 标签。如果您仍然收到此错误：大喊大叫，并在infinite-scroll.com 寻求帮助。 ...至少当我在本地下载您的代码并尝试更改它以查看问题时，这是我的情况。

我添加了 debug:true 并且突然它开始工作了......这需要进一步调查。

然后我刷新页面，完全相同的源代码，并得到错误。

【参考方案2】：

您还需要注意使用的无限滚动版本，因为如果您使用砖石/同位素（版本 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);

这已经在新版本的无限滚动中修复了

【参考方案3】：

我对 jQuery 的“infinitescroll”和 Masonry 也有同样的问题。您可以通过为您的页面提供更多初始项目来解决此问题，以便插件的滚动检测启动。

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

因此，如果您没有足够的图像，就很难在大型显示器上测试这些插件。也许解决方案是在大型显示器上将图像缩放得更大，这样您就更有把握将您的内容放在首屏之下。

如果您认为有人可能会以非常大的显示屏访问您的网站，我不确定答案是什么，除了显示更多项目/页面，也许在您的页脚添加 $('#masonry').infinitescroll('retrieve'); 以加载一个额外的页面案子。

【讨论】：

你是如何解决 jQuery 的无限滚动和 Masonry 的？ @pjbrunet

@SilviaBerardo 我不明白你的问题。

在渲染砌体容器的内容但未找到无限滚动元素后，我尝试使用 jquery 的无限滚动和砌体。我尝试使用您的答案解决我的问题，但它不起作用。我该如何解决这个问题？ @pjbrunet

@Silvia Berardo 这个特殊的解决方案说增加页面上的项目以跨越“折叠下方”，从而触发无限滚动。我最终编写了自己的解决方案，该解决方案太长而无法在 *** 上分享。如果您直接联系我，我可以解决无限滚动问题。