Problem with fadeOut from jQuery!

Question

Guys, I’m having a little problem here and I’ve tried to solve it in a lot of ways but nothing... I am trying to make a PRELOADER that will appear before loading the page the problem is that even after the page is loaded it still does not disappear.. I have the following code

HTML:

<div id="preloader"></div>

CSS:

#preloader{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: $white url("../img/loading.gif") no-repeat center center;
  background-size: 80px;
}

jQuery:

$(window).load(function() {
  $("#preloader").delay(500).fadeOut("slow").remove();
});

Answer 1

You are calling the wrong callback in the wrong window event, try the same as this fiddle here (I made some simple modifications to not use URL): https://jsfiddle.net/5t014jy0/

$(document).ready(function() {
  $("#preloader").delay(500)
  .fadeOut("slow", function() { 
    return $("#preloader").remove() 
  })
});

Answer 2

You can use the event document.onreadystatechange. When it is triggered just check the status if it is complete, hides the #preloader, following example:

document.onreadystatechange = function () {
   if (document.readyState == "loading") {
      //Mantem o #preloader visivel
   }else if(document.readyState == "complete") {
      $("#preloader").fadeOut("slow");
   }
}