しばらくしてからjQueryプリロードを停止します

Question

私はこの単純なjQueryプリローダーScript私のウェブサイトのために2つのオーバーレイローディング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

1）は$ .Deferred（$.promise()

を使用することができ、 2つのメソッド$ .promise（）があります。 約束は、その後fulfiledされている場合と、$ .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>

を解決さUPDATE：あたりとして要件

/*$('.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>