在加载内容之前显示 gif答案

【问题标题】：Display a gif until content is loaded在加载内容之前显示 gif
【发布时间】：2015-10-23 11:52:50
【问题描述】：

很抱歉，如果这个问题已经被多次回答了，就像我看到的很多次一样，只是不完全是我想要的。

所以我只有一个基本的 HTML 页面，如下所示：

<!DOCTYPE html>
<head>
  <title>Loading GIF</title>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script src="mainImg.js"></script>
</head>
<body>
  <style>
    #loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('flash_loading.gif') center no-repeat;
    }
  </style>
  <section id="loader">
    I'm loading..
  </section>

 <div>LOADS OF IMAGES AND CONTENT</div>

</div>
</body>
</html>

我的 JS 文件看起来像（我只是在测试不同的方法）：

var image = new Image();
image.onload = function () {
   console.info("Image loaded !");
   //do something...
}

image.src = "http://img.xcitefun.net/users/2010/08/196550,xcitefun-people-place-5.jpg";

我的问题是，如何在 jQuery 中实际加载加载 gif，直到页面上的所有内容、图像、内容都加载完毕？

谢谢

【问题讨论】：

也许只是默认把图片放在页面上，然后在window.onload上删除
您没有在代码中看到加载 gif 吗？
是的，你可以做到。最初将加载图像绑定在一个 div 中。让它的可见性属性为 true，然后在 DOM 准备就绪时，您可以将该 div 属性的可见性设置为 false。

标签： javascript jquery html css

【解决方案1】：

试试

html:

<section class="loader">
    I'm loading..
</section>

css:

section.loader {
    background: url('flash_loading.gif') no-repeat 50% 50%;
    transition: background-color 0;
}

section.loader body {
    opacity: 0;
    transition: opacity 0;
}

jQuery:

$("section").removeClass("loader");

或者：

<!DOCTYPE html>
<head>
  <title>Loading GIF</title>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script src="mainImg.js"></script>
</head>
<body>
 <style>
  #loading {
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: fixed;
      display: block;
      opacity: .9;
      background-color: #fff;
      z-index: 99;
      text-align: center;
   }
    #loader-image {
      position: absolute;
      top: 250px;
      left: 550px;
      z-index: 600          
    }
 </style>

 <div id="loader">
  <img id="loader-image" src="flash_loading.gif" alt="I'm loading.."/>
 </div>

 <div>LOADS OF IMAGES AND CONTENT</div>

</div>
</body>

<script language="javascript" type="text/javascript">

$(window).load(function() {
  $('#loader').hide();
});

</script>


</html>

【讨论】：