如何在沒有更多頁面加載時隱藏加載程序

在我正在構建https://vase.ai/blog/的此網站中，我使用無限滾動腳本將多個頁面製作爲一個頁面進行滾動。如何在沒有更多頁面加載時隱藏加載程序

我想隱藏加載器（旋轉的），當沒有更多的頁面加載。我盤算了一下，下面的代碼也許能夠幫我檢測錯誤（Failed to load resource: the server responded with a status of 404 (Not Found))並執行躲藏。但是，這是行不通的。我失去了一些東西，我用它來加載？

window.addEventListener('error', function(e) { 
    $('loading').fadeOut() 
}, true);

代碼更多：

//implementing infinite scrolling 
$grid.infinitescroll({ 
    // Pagination element that will be hidden 
    navSelector: '.pagination', 

    // Next page link 
    nextSelector: '.pagination a', 

    // Selector of items to retrieve 
    itemSelector: '.grid-blog', 
}, 

// Function called once the elements are retrieved 
function(new_elts) { 
    var elts = $(new_elts).css('opacity', 0); 

    elts.animate({opacity: 1}); 
    $grid.packery('appended', elts); 

    $('.target-resize').textfill({ 
    maxFontPixels: 36, 
    changeLineHeight:false 
    }) 

    $grid.packery({ 
    itemSelector: '.grid-blog', 
    gutter: 20, 

    }) 
});

來源

2017-07-07 tnkh

你可以包括您所使用加載額外頁面的代碼？ – Remi

@TheRickest你更新了代碼。 – tnkh

這是很難回答你的問題不在於使HTTP調用，以加載內容的代碼，但是，

1），你可能有一個錯誤，而且還有內容是。裝載，在這種情況下，你的裝載機甚至會消失如果內容仍在加載。

2）你應該有一些電話你的網站你必須加載。一個url數組，或任何東西，你可以使用它來隱藏你的加載器，當所有內容已被加載。

3）你應該有一個功能，使httpcalls來獲取您的內容。這個函數應該有一個回調。在此回調中，您應該能夠捕獲錯誤，然後隱藏加載器。

我不能給你更多關於你在例證中顯示的代碼的信息。

編輯：看你的代碼後，你可以嘗試做：

// Function called once the elements are retrieved 
function(new_elts) { 
    if(!new_elts) { 
     $('loading').fadeOut(); 
     return; 
    } 
... 
}

我不認爲這是正確的解決方案，你的插件應該有一個內置的功能停止調用新頁面，但由於我沒有看到進行http調用的函數，或任何URL的數組/迭代器，所以很難爲您提供幫助。

你應該檢查這個演示到：https://codepen.io/desandro/pen/rwwoGe

來源

2017-07-07 14:00:17 GaelBoyenval

Hi @GaelBoyenval我已更新我的代碼。謝謝 – tnkh

@TonyNg：你使用的是什麼庫？它是一個JQuery的插件？ – GaelBoyenval

你好，這是我使用https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js – tnkh

如何在沒有更多頁面加載時隱藏加載程序

回答

相關問題