使用fadeOut（）或hide（）来淡出/隐藏Bootstrap 4 spinner / loader，当浏览器窗口完全加载时

Question

使用fadeOut（）或hide（）来淡出/隐藏Bootstrap 4 spinner / loader，当浏览器窗口完全加载时

3

目标

我想在浏览器窗口完全加载之前显示旋转器/加载程序，加载完成后必须淡出/隐藏。

尝试

我尝试了另一个问题中提供的jQuery代码（如何在页面加载完成之前显示页面加载div？）如下所示。此外，我还尝试不使用Bootstrap并改用https://projects.lukehaas.me/css-loaders，就像在同一个问题中建议的那样。

问题

以上方法都没有给我需要的结果，因为旋转器/加载程序显示在我的页面内容上方，并且不会淡出/隐藏。

总结

我想知道可能我漏掉了什么。

感谢您的帮助！

$(window).load(function() {
  //$(".spinner-border").fadeOut("slow");
  $(".spinner-border").hide();
});

.images {
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.spinner-border {
  color: #d4d4d4;
  width: 8rem;
  height: 8rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="spinner-border"></div>

<h2>Gallery</h2>

<img src="img-1.jpg" class="images">
<img src="img-2.jpg" class="images">
<img src="img-3.jpg" class="images">

- Joehat

3

控制台出现了一个错误。这是由于load()用于向页面添加内容的AJAX请求。要挂钩到窗口的load事件，请使用$(window).on('load', function() {... - Rory McCrossan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user12713785 · Accepted Answer

嗨，JoeHat，我是这样解决的（请参见codepen），适用于bootstrap 4和Jquery 3.4.1。在我使用以下Jquery之前，无法使其工作。还添加了一个计时器。

这是链接

$(window).bind("load", function() {      
  setTimeout(function() {
 $('.overlay-loader').fadeOut(function() {           
    });
    }, 5000);            
});