2016-12-12 15 views
0

hotmail.comを使ったことはありますか? ログインすると、Outlookロゴとローディングバーが表示され、完了したら表示されなくなります。ページロードでロゴを実行する方法

私は同じことをしようとしています。

$(document).ready(function(){ 
    $(".loadingDiv").show(); 
} 

.loadingDiv{ width:100%; height:100% } 

しかし、ロゴが完全にアニメーション化されたら、いつ隠すべきかわかりません。

loadingDivには、私のウェブサイトのロゴがアニメーション化されていることを示すgifがあります。私はマルチアプリで最初のページとして#loadingDivを持っているので、それがデフォルトで開く

$(window).load(function(){// waits for all assets to load then executes the callback. 
    $(".loadingDiv").remove(); 
}); 
+0

* Spashscreens *(ロゴ)のために動作します彼らはすべてのユーザーの邪魔にあるように非常に迷惑しています彼らが立ち上がることができないように数秒間。そのためには、htmlにロゴを表示してから、setTimeoutを追加して非表示にします。アプリケーションが準備完了するまでは、HTMLのロゴを表示してから、他のリソースを読み込む準備が整うまで(すなわち、最初のhtmlにはない)、* loading *画面が使用されます。 –

+0

これは非常に便利でした!私はそれが好きなようにする必要があります、ユーザーがロゴが消えるのはちょうどtwitterのブートストラップのようなものです – Stan

答えて

0

これはあなた

var $preLoader = $(".main-loader"); 
 
$(window).load(function() { 
 
    $preLoader.fadeOut(""); // Animate loader off screen 
 
});
.main-loader { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url(http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif) center no-repeat white; 
 
    background-size:50px; 
 
}
<div class="main-loader"></div>

+0

ああ、ありがとうございます:D – Stan

0

あなたは​​メソッドを使用することができます。それから私は、次のコードを実行します。

setTimeout(function() { 
    $(':mobile-pagecontainer').pagecontainer('change', '#home', { changeHash: false }); 
}, 2000); 
関連する問題