等待無限滾動完成加載 - Javascript

我正在使用「無限滾動」頁面，當用戶滾動到頁面底部時，最多可調用40個元素。如何檢測最近一次裝載的所有內容的裝載時間？等待無限滾動完成加載 - Javascript

這隻適用於初始頁面加載：

$(window).load(function() { 
    // Do something 
});

是否有當有長後的頁面已經完成加載「加載」類似的東西？

對不起，如果這是另一個問題的重複。我無法在其他地方找到解決方案。

來源

2016-04-21 Andrew

如果它的無限可以等到最後？大聲笑 –

@AdamBuchananSmith - 我在談論下一組元素何時完成加載。無限滾動不會一次加載所有可能的數據，只是數據增量，直到用戶執行加載下一個增量的操作（通常是靠近頁面底部的滾動）。當最近的增量完成渲染時，我想檢測到它。 – Andrew

我從來沒有讀過這個問題，只讀過標題 –

經過一番挖掘，我使用了這個question/answer的變化。

我最終的結果看起來是這樣的：

function ($container, previousCount, callback) { 
    var _imgs = $container.find('img'), 
     _newImages = _imgs.slice(previousCount), // 'start index' for new images 
     imgCount = _newImages.length, // count how many new ones exist 
     counter = 0; 

    _imgs.on('load', function() { // Count loaded 
     runCallback(20, callback); 
    }).on('error', function() { // Count errors, anyway, to reach total 
     runCallback(20, callback); 
    }); 

    function runCallback(counterLimit, callback) { 
     // if counter meets new count or hits counter limit, run callback 
     counter++; 
     if (counter == imgCount || counter == counterLimit) { 
      callback(); 
     } 
    } 
}

一些怪癖，爲什麼我需要這種方式。 previousCount實際上可能大於DOM中當前圖像的總數，這是因爲人們可以跳過無限滾動的不同部分。正因爲如此，還有counter == counterLimit的支票。

此外，我需要運行一個腳本，當新的圖像集完成加載，無論他們是否成功或失敗。這就是爲什麼我使用.on('load'和.on('error'來增加計數。我注意到，有時候圖像可能會出錯（這在這種情況下很好），並且會拋出計數並且不會觸發回調。

==================

編輯16年4月27日：我既然發現了一個插件，可以幫助您處理該，似乎能夠很好地工作（除了之前加載完成之前的幾個後續加載）。檢出imagesLoaded。

來源

2016-04-23 01:19:23 Andrew

等待無限滾動完成加載 - Javascript

回答

相關問題