javascript - Jscroll立即加载所有页面

Question

我试图让 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>

以及可以找到的Javascript代码here并且问题仍然发生。

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 的 bool 变量。您需要在发送 ajax 请求时将其设置为 true，在响应回调中将其设置为 false。在ajax请求中(您可能必须覆盖/修改jscroll函数)，您检查是否isPaging==true。如果是，则返回，这样请求就不会再次发送。

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

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

将其添加到您的大型文件链接中即可解决问题。

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

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