在整个页面加载之前显示加载器答案

【问题标题】：Display loader before whole page gets load在整个页面加载之前显示加载器
【发布时间】：2017-07-06 11:19:31
【问题描述】：

代码很简单，但是页面会随着加载器一起加载。

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

<body>
<header>
<div class="loader"><img src="img/loader.gif"></div>
</header>
</body>

【问题讨论】：

Display a loading bar before the entire page is loaded的可能重复
可能更恰当地与以下相关：stackoverflow.com/questions/23906956/…
这个加载GIF的目的是什么？你想只显示 2 秒然后淡出，还是在 DOM 的其余部分实际加载时显示？

标签： jquery

【解决方案1】：

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

应该让它在渲染后立即显示加载器，然后慢慢淡出。这个<header> 部分和脚本应该是<body> 中的第一项。

【讨论】：

【解决方案2】：

喜欢使用document.ready，如下所示。

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

【讨论】：