显示一个gif，直到内容被加载

Display a gif until content is loaded

本文关键字：加载 gif 一个 显示      更新时间：2023-09-26

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

所以我有一个基本的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，直到页面上的一切都加载，图像，内容的一切?

谢谢

Try

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>
相关文章：