没有更多页面要加载时如何隐藏加载程序

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) 你应该有一些东西可以告诉你的网站你必须加载什么。 一个 url 数组，或者任何东西，当所有内容都被加载时，你可以使用它来隐藏你的加载器。

3) 你应该在某个地方有一个函数来进行 httpcalls 来获取你的内容。这个函数应该有一个回调。在这个回调中，你应该能够捕获一个错误，然后隐藏你的加载器。

对于您在示例中显示的代码量，我无法为您提供更多信息。

---

编辑：查看您的代码后，您可以尝试这样做：

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

我认为这不是正确的解决方案，您的插件应该有一个内置函数来停止调用新页面，但是因为我没有看到进行 http 调用的函数，或者任何数组/迭代器网址，很难顶帮你。

你应该查看这个演示到：https://codepen.io/desandro/pen/rwwoGe