Jscroll 立即加载所有页面

Question

我试图让 Jscroll 无限滚动 div 图像，但我发现它一被触发就会立即加载它可以加载的所有页面。在 Opera、Chrome 和 Firefox 上，这意味着它会在 space 几秒钟内加载数千个页面，从而导致浏览器崩溃。在 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 代码，但问题仍然存在。

Answer 1

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

jscroll会在

时触发调用

The distance from the bottom of the scrollable content at which to trigger the loading of the next set of content. This only applies when autoTrigger is set to true.

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

我的解决方案是一个名为 isPaging 的布尔变量。您需要在发送 ajax 请求时将其设置为 true，并在响应回调中将其设置为 false。在 ajax 请求中（您可能需要 override/modify 一个 jscroll 函数），您检查是否 isPaging==true。如果是，就 return 这样就不会再次发送请求。

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

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

将此添加到您的 mega 文件 link 即可解决问题。

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

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

Answer 2

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

Jscroll 立即加载所有页面

Jscroll immediately loading all pages

javascript

jquery

infinite-scroll