0

Code is simple but page gets load along with loader.

<script>
$(window).load(function() {
$(".loader").delay(2000).fadeOut("slow");
})
</script>

<body>
<header>
<div class="loader"><img src="img/loader.gif"></div>
</header>
</body>
Pooja Thapa
  • 83
  • 1
  • 16
  • 1
    Possible duplicate of [Display a loading bar before the entire page is loaded](https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded) – Samuil Petrov Jul 06 '17 at 11:26
  • Maybe more appropriately related to: https://stackoverflow.com/questions/23906956/show-loading-icon-until-the-page-is-load – Samuil Petrov Jul 06 '17 at 11:27
  • What is the purpose of this loading GIF? Do you want to just show it for 2 seconds and then fade out, or show it while the rest of the DOM is actually loading? – Koen Jul 06 '17 at 11:27

2 Answers2

0
<body>
  <header>
    <div class="loader"><img src="img/loader.gif"></div>
    <script>
      $(".loader").fadeOut("slow");
    </script>
  </header>
</body>

Should make it show the loader immediately after it's rendered, and then slowly fade out. This <header> section and then the script should be the first items in the <body>.

ADyson
  • 57,178
  • 14
  • 51
  • 63
0

Prefer using document.ready like below.

$(document).ready(function() {
$(".loader").delay(2000).fadeOut("slow");
})
 <script  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
 <header><div class="loader"><img src="img/loader.gif" alt="loading............."/></div> </header>
Prashant Shirke
  • 1,423
  • 1
  • 8
  • 10