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

在页面加载时，使用不同的readyState来删除加载器类。

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

Answer 2

您要做的是

在想要的页面上添加了一个永久元素。

您想要的是

一个临时元素，一旦页面被加载（如果我理解正确的话）就会消失。

我认为最好的选择是在一定时间后从触发器上从页面上删除该元素，或者将其触发（例如document.load），或者将该元素与其他隐藏该元素的元素重叠，或者将其隐藏元素使用opacity：0.01，动画持续时间：1.5s（或您喜欢的任何时间），因此使用JavaScipt逐渐消失。

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

Answer 3

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

Css：

.hide{
display:none
}

JQuery：

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

或

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

Answer 4

有两种方法：

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

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

第二个是您设置了几秒钟，例如5秒钟后它将被删除。

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

Answer 5

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

使用$(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

一段时间后如何停止装载程序？

5 个答案: