在document.ready到window.load期间在特定div上设置加载器

kai*_*dra 2 html javascript css jquery joomla

问题:有做过计算大量的JavaScript计算widthdiv后"准备就绪"状态.我想在a 之间document.ready和之间设置这样的加载时间,以便它等待最终然后正确显示,这意味着它的宽度会挂起一段时间,这是它的加载时间.document.loaddivwidth

如果您无法理解我的问题,请对此问题发表评论.

kai*_*dra 5

  • 我们知道在加载函数之前就准备好函数调用,所以我们可以在加载div上设置set loader并在加载后删除这个div.
  • loader div应该是相对的,因为overlay div绝对只显示在该div上

  • 加载窗口后如此简单的隐藏叠加div

jQuery(window).load(function(){
                             
  // THIS IS ORIGINAL CODE  
  
  //jQuery('.loader_main_overlay').css('display','none');
  // Alternate way to show loader in this example not exact way
      jQuery('.loader_main_overlay').fadeOut(2000);
  	});
Run Code Online (Sandbox Code Playgroud)
.loader_main{
  height:100%;
  width:100%;
  position:relative;
  }
.loader_main_overlay{
  position:absolute;
  width:inherit;
  height:inherit;
  background-image:url('http://bildbearbeitung.onl/images/ui/load1.gif');
  background-color: #ccc;
  opacity: 0.8;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>

<div class="loader_main">
  <div class="loader_main_overlay">
      
  </div>
   <img src="https://static.pexels.com/photos/112576/pexels-photo-112576.jpeg" />
</div>
</body>
Run Code Online (Sandbox Code Playgroud)