Problem with jQuery fadeOut!

Question

Problem with jQuery fadeOut!

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I'm trying to make a PRELOADER that will appear before loading the page. The problem is that even after the page is loaded it 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();
});

html jquery css

asked by anonymous 26.07.2017 / 00:06

2 answers

1

You're calling the wrong callback in the wrong window event, try this fiddle here (I made some simple modifications not to use URL): link

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

26.07.2017 / 00:34

Program settings continue even after they have been uninstalled [closed] Using multiple Schemas with Entity Framework 6

score 1 · Accepted Answer

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

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