一段时间后停止 jQuery Preload

Question

我的网站有这个简单的jQuery 预加载器Script，它显示两个覆盖加载divs(#preload_out and .preload_overlay)，直到加载整个页面。之后divs 淡出，我的标题开始动画。

$(window).load(function() {
  $('#preload_out, .preload_overlay').delay(180).fadeOut(600, function() {
    $('header').addClass('play');
  });
});

有没有办法在一段时间后停止预加载器(e.g. 2 seconds)，尽管网站没有完全加载，但它会淡出并启动标题动画？当存在加载问题时，我想避免覆盖阻止整个站点。至少我所有的折叠物品都需要 3 秒。有时会出现某种错误，您必须刷新整个站点，因为加载器会因为服务器问题而持续工作很长时间。

干杯！

Answer 1

您可以用来解决问题的一种方法是使用$.promise()

$.Deferred();包含 2 个方法 $.promise();和 $.resolve()，如果 承诺已经兑现，然后就解决了

这是一个演示

function first(){
     
             var deffered2 = $.Deferred();

        /*$('#preload_out,        .preload_overlay').delay(180).fadeOut(600,function({
          $('header').addClass('play');
        });*/

        $('.box').fadeOut(3000,function(){deffered2.resolve();});
            return deffered2.promise();
     }
 
     function second(){
           console.log('now 2d executes');
           $('.box2').fadeOut(9000);
      }
      
     first().done(function(){
        second();
     });

.box{
          width:100px;
          height:100px;
          background-color:blue;
          position: absolute;
        }
        .box2{
          //margin-bottom: 9em;
          bottom:1em;
          width:100px;
          height:100px;
          background-color:red;
          position: absolute;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="box"></div>
  <div class="box2"></div>

更新：根据要求

  /*$('.preload_overlay').delay(180).fadeOut(600, function() {
    $('header').addClass('play');
  });*/
  
  function first(){
     
      var deffered2 = $.Deferred();
   
 $('.preload_overlay').delay(180).fadeOut(6000,function(){deffered2.resolve();});
            return deffered2.promise();
     }
 
     function second(){
           console.log('now 2d executes');
           $('header').addClass('play');
           // $('header').addClass('play').fadeOut(1200);  if you want it to fadeOut  after some time then you can do it like so
      }
      
     first().done(function(){
        second();
     });

header {
  height: 150px;
  width: 100%;
  animation: move 2s;
  background: lightgreen;
  animation-play-state: paused;
}

@keyframes move {
  from {
    height: 50px;
  }
  to {
    height: 150px;
  }
}

.play {
  animation-play-state: running;
}

.preload_overlay {
  position: absolute;
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  background-color: #000000;
  z-index: 999999;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="preload_overlay"></div>
<header></header>