Jscroll立即加載所有

頁我試圖讓Jscroll無限滾動的圖像的一個div，但我發現它立即只要它觸發加載它可以將所有頁面。在Opera，Chrome和Firefox上這意味着它會在幾秒鐘內加載數千頁，導致瀏覽器崩潰。在Microsoft Edge上，這意味着只要用戶向上或向下滾動，就會加載頁面。Jscroll立即加載所有

這是我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代碼，問題仍然存在。

來源

2016-02-27 John Cave

您發佈的代碼看起來很好，並且與加載所有頁面無關。可能是你錯過了其他部分的代碼，可能是 –

我確信標記也沒問題，所以我創建了一個新的Javascript文件，只有Jquery 2.1.4（我在之前的項目中使用過的版本Jscroll以防Jquery版本的問題）和Jscroll，並且問題仍然存在。看我的編輯。 –

我已經有你完全相同的問題..我想。

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標記在最後。

來源

2016-02-27 04:50:20

嗨埃裏克， 0填充應該意味着用戶必須實際打到屏幕的末尾之前，jscroll將觸發並加載多一頁，但在我的情況下，它無限觸發，無論用戶滾動到哪裏在所有。 Jscroll不會同時加載多個新頁面，它只是遞歸地逐個加載新的頁面，因爲它始終認爲用戶已滾動到超出其綁定的div末尾。 –

我明白了。你可以用jsFiddle複製這個問題嗎？它與html和jscroll計算高度的方式有關。在調試時，jscroll認爲'$ inner.outerHeight（） - iTotalHeight = -3082'，當它應該是一些正數時。 –

這段代碼的工作原理與JSfiddle中的應該完全一樣（不遞歸加載），這裏是https://jsfiddle.net/h8xd4nhv/2/，但是如果我完全複製並粘貼該代碼並更新URL以指向html文件把html放入，它再次執行遞歸加載。 –

值得注意的是，jScroll似乎並不與砌體兼容。我試圖將它們一起使用，並且Masonry似乎正在接管div的高度屬性，導致jScroll無法確定div剩下多少。即使在接受答案中的解決方案也沒有解決這個問題。尋求另一種無限滾動解決方案。

來源

2016-02-28 01:34:38

Jscroll立即加載所有

回答

相關問題