Question

我正在#section内加载一个页面，该页面大约450kb，所以我正在尝试安装预加载器。

问题在于预加载器永远不会消失，而且我不确定我是否使用了正确的代码。我已经将CSS代码保存在另一个文件中，并且在索引部分加载的HTML厚重的内部，将脚本放置到头部结束，而#preloader div位于{的开头{1}}。

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

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%;}
}

Answer 1

尝试用$(document).ready()代替$(window).load()

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

Answer 2

我通过隐藏链接并在上一页中显示加载程序来解决该问题，当我单击链接时，并且当新页面加载时，预加载程序会自动消失！

感谢大家的知识，使我能够继续学习。

为什么预加载器不消失？

2 个答案: