Question

我很抱歉，如果已经多次回答这个问题，因为我已经看过很多，只是不是我正在寻找的。

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

由于

Answer 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>

显示gif，直到加载内容

1 个答案: