为什么预加载器不会消失？

Question

我正在#section 中加载一个页面，该页面大约为 450kb，因此我正在尝试安装预加载器。

问题是预加载器永远不会消失，我不确定我是否使用了正确的代码。我在另一个文件中得到了 CSS 代码，在我的索引部分加载的重 HTML 中，我将脚本放置到头部结束，并且 #preloader div 是在 body.

的开头

问题是，首先代码应该放在哪里？为什么它不起作用？

<script type="text/javascript">
  $(window).load(function () {
          $('#preloader').delay(2500).fadeOut('slow');
          $('body').delay(2500).css({
              'overflow': 'visible'
          });
      })
</script>

body {
  overflow: hidden;
}
#preloader {
  position: absolute;
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-45%);
}
.spinner div {
  width: 12px;
  height: 12px;
  position: absolute;
  left: -20px;
  border-radius: 50%;
  animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}
.spinner div:nth-child(2) {
  animation-delay: 150ms;
}
.spinner div:nth-child(3) {
  animation-delay: 300ms;
}
.spinner div:nth-child(4) {
  animation-delay: 450ms;
}
@keyframes move {
  0% {left: 0%;}
  75% {left:100%;}
  100% {left:100%;}
}

<div id="preloader">
  <div class="spinner">
    <div style="background-color:#f48fb1"></div>
    <div style="background-color:#e91e63"></div>
    <div style="background-color:#f8bbd0"></div>
    <div style="background-color:#f06292"></div>
  </div>
</div>

Answer 1

尝试 $(document).ready() 而不是 $(window).load()

$(document).ready(function() {
  $('#preloader').delay(2500).fadeOut('slow');
  $('body').delay(2500).css({
    'overflow': 'visible'
  });
})

Answer 2

我通过隐藏溢出并在单击 link 时在上一页中显示加载器解决了这个问题，当新页面加载时预加载器自动消失！

感谢所有让我继续学习的知识。

为什么预加载器不会消失？

Why the preloader doesn't dissapear?

css

jquery

preloader