Jscroll 立即加载所有页面答案

【问题标题】：Jscroll immediately loading all pagesJscroll 立即加载所有页面
【发布时间】：2016-02-27 03:56:11
【问题描述】：

我正在尝试让 Jscroll 无限滚动图像的 div，但我发现它会在触发后立即加载它可以加载的所有页面。在 Opera、Chrome 和 Firefox 上，这意味着它会在几秒钟内加载数千个页面，从而使浏览器崩溃。在 Microsoft Edge 上，这意味着它会在用户向上或向下滚动时加载页面。

这是我对相关 div 的 html 标记；

<div id="images-wall">
<div class="home-thumb col-md-2 col-sm-3 col-xs-4 no-padding"><a href="/image/22" target="_blank"><picture><img class="home-img" src="//thumb.example.com/webp/22.webp" title="Image Name"></picture></a></div>
<nav id="#next"><a href="/more/home/2016-02-12+17:36:45"></a></nav></div>
</div>

这是我用来调用 jscroll 的 Javascript；

function reLayout(){
    console.log("Loaded new images.");
}


$('#images-wall').jscroll({
    debug: true,
    padding: 0,
    callback: reLayout,
    loadingHtml: 'LOADING MORE'
});

这是Jscroll放在控制台的调试输出；

js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object
js.js:15376 jScroll: -3082 from bottom. Loading next request...
js.js:15376 Object

这类似于我之前在一个项目中使用的标记来实现 jscroll，我在这里做错了什么？

编辑：

我用这个 HTML 代码做了一个最小的例子；

<script src="/static/js2.js"></script>
<div id="images-wall">
<a href="/image/22/" target="_blank">
<img class="home-img" src="//thumb.example.com/webp/22.webp" title="Title of the image.">
</a>
<a href="/more/home/2016-02-12+17:36:45"></a>
</div>

并且可以找到 here 的 Javascript 代码，问题仍然存在。

【问题讨论】：

您发布的代码看起来不错，与加载所有页面无关。可能是你错过了发布其他可能的代码部分
我确信标记也很好，所以我只用 Jquery 2.1.4 制作了一个新的 Javascript 文件（我在以前的 Jscroll 项目中使用的版本，以防出现问题Jquery版本）和Jscroll，问题仍然存在。查看我的编辑。

标签： javascript jquery infinite-scroll

【解决方案1】：

我遇到了完全相同的问题.. 我想。

jscroll会触发调用

触发加载下一组内容的可滚动内容底部的距离。这仅在 autoTrigger 设置为 true 时适用。

你的padding 为0。想想一个cpu 在一秒钟内可以做多少动作，然后想想用户滚动到底部的那一刻会发生什么。 javascript 将向服务器发出请求，例如 BAM BAM BAM BAM。这就是为什么您的所有图片都会同时进入的原因。

我的解决方案是一个名为 isPaging 的布尔变量。您需要在发送 ajax 请求时将其设置为 true，并在响应回调中设置为 false。在 ajax 请求中（您可能必须覆盖/修改一个 jscroll 函数），您检查是否isPaging==true。如果是，请直接返回，以免再次发送请求。

这样自动加载只会发生一次。收到响应后，容器将填满内容，并且它的滚动条将向上移动。然后用户可以再次向下滚动到底部，等等。

编辑：找到了问题，有点。当 jscroll 容器依赖窗口滚动而不是它自己的滚动条时，Jscroll 似乎会中断。因此，滚动位置的 jscroll 计算变得一团糟。我仍然不知道根本原因，但我确实计划向创作者提出问题。（编辑：我看到你已经提出了一个问题，然后我会添加它。）

将此添加到您的大型文件链接中，它可以解决问题。

<style>
#images-wall{
height:100%;
}
</style>

最后还有一个额外的结束 div 标签。

【讨论】：

嗨，Eric，0 填充应该意味着用户必须在 jscroll 触发并再加载一个页面之前实际击中屏幕的末尾，但在我的情况下，它会无限触发而不考虑用户滚动到的地方。 Jscroll 不会一次加载多个新页面，它只是递归地一个接一个地加载新页面，因为它总是认为用户已经滚动到它绑定到的 div 的末尾。
我明白了。你能用 jsFiddle 复制这个问题吗？它与 html 和 jscroll 计算高度的方式有关。在调试中，jscroll 认为$inner.outerHeight() - iTotalHeight = -3082 应该是某个正数。
代码在 JSfiddle 中完全按照应有的方式工作（无递归加载），此处为 jsfiddle.net/h8xd4nhv/2，但如果我准确复制并粘贴该代码并更新 URL 以指向 html 文件，我将html 中，它再次进行递归加载。
这是一个包含 javascipt 和 html 的文件的超级链接。在我的系统上，当我打开它时，页面会递归加载并崩溃（请注意，在这种情况下它不会在 Chrome 上打开，而 Firefox 会运行它）。 mega.nz/#!w8tHWLKL!XUSYOfeeN7LTRg-S0PRXrbjx9gjeE0BI57o88rp55R0
编辑：我刚刚意识到您所说的编辑是什么意思。非常感谢。

【解决方案2】：

值得注意的是，jScroll 似乎与 Masonry 不兼容。我试图将它们一起使用，而 Masonry 似乎正在接管 div 的高度属性，导致 jScroll 无法确定 div 还剩下多少。即使是接受的答案中的解决方案也没有解决这个问题。寻求另一种无限滚动解决方案。

【讨论】：