jquery - 一段时间后如何停止装载机？

Question

我创建了一个网站，在该网站加载之前加载 SVG 图像。它工作得很好，但问题是加载器图像没有停止，如果我删除class="loader-bg"，那么网站无法正确加载。我该如何解决这个问题？请帮我。

<div class="loader-bg"></div>

.loader-bg {
  background: #ffffff url(../images/loader.svg) no-repeat center center;
}
.loader-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
}

Answer 1

可以有两种方式：

首先是您等待一些响应，然后删除加载程序。

success: 
    $('.loader-bg').css('display', 'none');

其次是你设置了一些秒，比如 5 秒后它将被删除。

setTimeout(function(){ 
    $('.loader-bg').css('display', 'none');
}, 5000); // it will remove after 5 seconds

Answer 2

加载页面时，使用不同的 readyStates 来移除 loader 类。

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    //Remove loader class from div
  }
}

Answer 3

你所做的是，

• 向您想要的页面添加了一个永久元素。

你想要的是，

• 加载页面后消失的临时元素（如果我理解正确的话。）

我认为最好的办法是在设定的时间或触发器（如 document.load）后从页面中完全删除该元素，或者只是将该元素与隐藏它的其他元素重叠，或使用不透明度隐藏该元素:0.01 with animation-duration: 1.5s (或任何你喜欢的) 所以它会使用 JavaScipt 消失。

如果您能提供更多意见，我会更好地帮助我们。

Answer 4

页面加载完成后尝试隐藏 div

CSS：

.hide{
display:none
}

查询：

$('.loader-bg').addClass('hide');

或者

$('.loader-bg').css('display','none');

Answer 5

您可以使用 jQuery 的document.onload快捷方式，然后使用 jQuery 的函数display将加载程序设置为。none.css()

使用$(function() {...});

$(function() {
  $("#loader").css("display", "none");
});

#loader {
  width: 50vw;
  height: 50vh;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-top: 25vh;
  padding-bottom: 25vh;
  background-color: skyblue;
  color: white;
  text-align: center;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader">Loading</div>
The document has loaded

使用$(document).ready(function() {...});

$(document).ready(function() {
  $("#loader").css("display", "none");
});

#loader {
  width: 50vw;
  height: 50vh;
  padding-left: 25vw;
  padding-right: 25vw;
  padding-top: 25vh;
  padding-bottom: 25vh;
  background-color: skyblue;
  color: white;
  text-align: center;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader">Loading</div>
The document has loaded