Question

我正在尝试让Jscroll无限滚动一系列图像，但我发现它会在触发后立即加载所有页面。在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代码，问题仍然存在。

Answer 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标签。

Answer 2

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

Jscroll立即加载所有页面

2 个答案: