Why the preloader doesn't dissapear?

Question

I am loading a page inside a #section and the page is around 450kb, so I'm trying to install a preloader.

The problem is that the preloader never disappears and I'm not sure if I'm using the right the code. I've got the CSS code in another file, and inside the heavy HTML which is loaded in the section of my index I am placing the script until the head ends, and the #preloader div is at the beginning of the body.

The questions are, in first place are the codes where they should be? And why does it not work?

<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>

Sa Si Kumar Sa Si Kumar · Accepted Answer · 2018-10-10T11:02:43

try $(document).ready() instead of $(window).load()

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

Why the preloader doesn't dissapear?

2 Answers