当没有更多页面要加载时如何隐藏加载器

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