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>

一段时间后停止jQuery Preload

1 个答案: