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

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

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

回答

相关问题