-1

I have a gif which I want to set as a website preloader. But when I do so the preloader doesn't dissappear even after page load. I have tried various java scripts but none of them proved to be of use.

$(window).on("load", function() {
  $(".loading").fadeOut("slow");
});
.loading {
  background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: contain;
  z-index: 9999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading"></div>
<div class="content">Test</div>
ikiK
  • 6,328
  • 4
  • 20
  • 40
Dhruv
  • 37
  • 1
  • 7
  • 1
    Yes it does, remove – ikiK Mar 02 '21 at 12:40
  • it works with me just fine [try here](https://codepen.io/mahmed-nabil/pen/NWbMBgX) make sure that you add the script after you include the jquery cdn – mahmed nabil Mar 02 '21 at 12:51
  • works perfectly fine. you can try also `$(document).ready(function() { $(".loading").fadeOut("slow"); });` – MSQ Mar 02 '21 at 13:00

1 Answers1

0

Alternatively you can do this

$(document).ready(function() {
  $(".loading").fadeOut("slow");
});
.loading {
  background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: contain;
  z-index: 9999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading"></div>
<div class="content">Test</div>
MSQ
  • 489
  • 5
  • 15