當沒有更多頁面要加載時如何隱藏加載器

Question

在我正在構建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,

  })
});     

Answer 1

沒有用於加載內容的http調用代碼，很難回答您的問題。 但，

1）您可能有一個錯誤，仍然有要加載的內容，在這種情況下，即使內容仍在加載中，您的加載器也會消失。

2）您應該有一些東西可以打電話給您的網站，您必須加載。 網址數組或其他任何內容，當所有內容加載完畢后，您可以使用它來隱藏您的加載器。

3）您應該在某處具有進行httpcall的功能以獲取您的內容。 該函數應該有一個回調。 在此回調中，您應該能夠捕獲一個錯誤，然后隱藏您的加載程序。

我無法提供您示例中顯示的代碼量的更多信息。

---

編輯：查看代碼后，您可以嘗試執行以下操作：

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

我認為這不是正確的解決方案，您的插件應該具有內置函數來停止調用新頁面，但是由於我看不到進行http調用或任何URL數組/迭代器的函數，因此困難的頂部可以幫助您。

您應該將此演示檢查到： https : //codepen.io/desandro/pen/rwwoGe