使用 jquery 延迟预加载器淡出

Question

我看到这里有很多关于此的问题，但我似乎无法在我的网站中正确实施它。在淡出之前，我试图让我的预加载器达到 gif 的长度（3 秒）运行。我的密码是

jQuery(document).ready(function($) {
    $(window).load(function(){
        jQuery('#preloader').fadeOut('slow',function(){jQuery(this).remove();});
    });
});

我知道我应该使用 setTimeout，但我似乎无法弄明白。有什么建议吗？

我意识到我的代码在页面加载时而不是在加载后执行淡出，但在实现后者时遇到了麻烦。

Answer 1

由于 fadeOut() 使用 jQuery fx 队列，您可以使用 delay() 实现此目的：

jQuery($ => {
  $(window).on('load', () => {
    $('#preloader').delay(3000).fadeOut('slow', function() {
      $(this).remove();
    });
  });
});

或者您可以使用 setTimeout()，正如您在问题中提到的：

jQuery($ => {
  $(window).on('load', () => {
    setTimeout(() => {
      $('#preloader').fadeOut('slow', function() {
        $(this).remove();
      });
    }, 3000);
  });
});

使用 jquery 延迟预加载器淡出

Delay a preloader fadeout with jquery

html

jquery

preloader