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

【问题标题】：Why the preloader doesn't dissapear?为什么预加载器不会消失？
【发布时间】：2018-10-10 10:50:55
【问题描述】：

我正在#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>

【问题讨论】：

您是否尝试使用 $(document).ready 代替？
你检查过 $(window).load 是否被调用了吗？

标签： jquery css preloader

【解决方案1】：

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

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

【讨论】：

是的，这行得通。 .load() 方法已被弃用，并根据文档在 3.0 版中删除。
我认为使用 $(document).ready() 效果更好，因为以前当我使用 $(document).load() 调整窗口大小时，我没有滚动条，现在我有了滚动条但是预加载器仍然存在，我注意到别的东西，一旦页面已经加载，预加载器就会启动，所以当它不再需要预加载器时，我应该在上一页中调用预加载器并在新页面中关闭它吗？！我迷路了……谢谢。
现在我注意到当我打开我单独加载的页面时它可以工作并且消失，预加载器没有消失的问题是当我在 index.html 的部分下加载页面时，也许我应该尝试其他方法来引用预加载器，例如 $('#section #preloader')，但显然没有用。

【解决方案2】：

当我点击链接时，我通过隐藏溢出并在上一页中显示加载器来解决问题，当新页面加载时，预加载器会自动消失！

感谢大家的知识让我继续学习。

【讨论】：