ネット開発者なら、次の画面はおなじみでしょう：
これはuniverse*** IDE Visual Studioのスタートアップ画面です。IDEだけでなく、多くのデスクトップアプリケーションにもこのスプラッシュウィンドウがあり、アプリケーションが初期化されるときに表示されます。
この点で、最も素晴らしい非アドビのデザインソフトウェアは、すべての後に、ああ起源の芸術に従事することです。PS 8.0からブロガーを使用して、興奮の新バージョンをアップグレードするたびに、新機能ではありませんが、すべての最初の新しいスタート画面に興奮しています。次のイメージは、PSのスプラッシュ画面の*** CCバージョンです。それのようなものはありません。
[]
スプラッシュスクリーンはデスクトップアプリケーション特有のものではなく、ウェブページにも実装することができます。また、時代の流れとともに、Webアプリケーションが複雑化し、読み込みに時間がかかるようになった現在では、スプラッシュスクリーンは必要ではないでしょうか。
例えばGoogleのGmailは、フルスクリーンで動作すればネイティブアプリのように感じられるでしょう。
Gmailのようなスプラッシュスクリーンをウェブアプリに追加する方法をご紹介します。
クリックして効果をプレビューしてください。 コードを見るには
進捗キャプチャ
静止イメージを表示するのはいいのですが、起動画面にアプリケーションの進行状況を表示したい場合、やっかいなのはどうやって進行状況を取得するかです。いろいろ調べた結果、ページの実際のダウンロードの進行状況を取得する方法はないことがわかりました！もちろん、私だけではないと思いますので、もしこのような方法をご存知でしたら、ぜひ教えてください。
ページ上の非同期操作では、進捗状況をリッスンすることが可能です。HTML5の仕様では、Ajaxにはprogressイベントがあり、これを通じて非同期操作の完了を取得できますが、event.lengthComputableプロパティがtrueの場合のみです。つまり、リクエストの結果のいくつかはサイズを知ることができますが、より多くの場合、サーバから返されるコンテンツのサイズは不明であり、この場合、進捗イベントをリッスンしても、操作の本当の進捗状況を取得することはできません。
その場合には、その後、意味の数パーセントに運ぶために、特定の非常に多くはありませんが、目的は、このプロセスを待っているユーザーで、ユーザーエクスペリエンスを向上させることである見て何かがあるか、またはプログラムがまだ実行されていることを示すものを移動します生きているのではなく、エラーが立ち往生しています。ページが100％にプログレスバーが完全にロードされるまで、移動プログレスバーがすることができますので、ユーザーを表示します。
エピソード：ページの本当のダウンロード進捗を取得する方法を探る過程で、素晴らしい仕事をするページ読み込み進捗プラグインであるpace.jsコードを研究したところ、彼が内部的に同じことをしていることがわかりました。ページに表示される進捗は、ページの読み込みの本当の進捗を返すのではなく、ただ増え続け、ページの読み込みが終わると100%にドラッグされます。もちろん、このライブラリはajaxやウェブソケットなど様々な状況に対応できるように書かれています。もうひとつはGmailで、ページを更新しようと何度も試行錯誤した結果、ある法則を見つけました。そのプログレス・バーは、ある地点までずっと走り、それから止まって、最後までずっと走り続けるのです！結論。
Nprogress
便利なように、ここではアニメーションを表示するためにJSライブラリのnprogressを使用しています。nprogressは非常に便利なAPIをいくつか提供しています。
NProgress.start() - プログレス・バーを開始します。
NProgress.set(0.4) - 進捗を特定のパーセンテージ位置に設定します。
NProgress.inc() - 進捗が少し増加
NProgress.done() - プログレス・バーを完了としてマークします。
スプラッシュ画面の定義
さて、アイデアが出揃ったところで、未熟な施工の登場です。
具体的には、最初のページでは、あらかじめ定義されたスプラッシュ・スクリーンのみが表示され、そのスクリーンは画面全体を占め、ページ内のz-indexは***となっています。
これはJuriが 彼のブログに投稿したコードから直接拝借したものですが、私のブログ記事「Front-End Cold Knowledge Roundup」で紹介したテクニックを使って、HTMLコードをscriptタグに格納しています。
<script type="text" id="splash-template">
<div class="splash card">
<div role="spinner">
<div class="spinner-icon"></div>
</div>
<p class="lead" style="text-align:center">もう戻ってこないで、立ち去るんだ。...</p>
<div class="progress">
<div class="mybar" role="bar">
</div>
</div>
</div>
</script>
このスプラッシュ・スクリーンは、HTMLがロードされた後、***時間***表示されます。次に、これを行うことができます、プログレスバーを開始するページの先頭でNprogress.start()を呼び出し、スプラッシュスクリーンで覆われたページでは、プログラムの初期化を続行し、他のいくつかの非常に時間のかかる操作などを行います。たとえば、Gmailを想像している場合、ページの冒頭でのみプログレスバーそれらの基本的なHTMLとJSコードを表示することがあり、その後、データを受信した後、サーバーからメールメッセージの多数を要求する必要がありますし、ページに追加するメーリングリストを生成するためにHTMLに整理されますが、このプロセスは、プログレスバーによってブロックされますので、見ることができません。すべての準備ができたら、Nprogress.done() を呼び出してプログレスバーを隠します。この時点で完全なページが表示されます。
一連の流れ
window.onloadイベントは、イメージやiframeなどを含むページ全体が読み込まれるイベントです。ですから、このイベントで進捗を100%にすることは問題なく、論理的にも正しいと考えてよいでしょう。
いつ終わるかが決まったら、いつ始めるかを見てみましょう。最初にスプラッシュウィンドウを表示し、定義されたスプラッシュスクリーンテンプレートを操作する必要があるので、それ以前にHTMLのスプラッシュスクリーン部分の読み込みが終わるのを待たなければならないということになります。そこで、結論としては、HTMLコードのこの部分にプログレスバーの開始コードを入れることになるのですが、JS挿入の練習でこのようなHTMLは非常にまずいので、***は$.ready()に入れることにしました。このイベントはHTMLを読み込んだ後のページでトリガーされますが、DOMのみで、上記のイメージやiframeなどの他のものは含まれないのでwindow.onloadの前に発生します。
そこで、ページのheadタグ内に以下のコードを追加します：
$(function() {
NProgress.configure({
template: $('#splash-template').html()
});
NProgress.start();
});
$(window).load(function() {
NProgress.done();
})
より科学的なアプローチの実際のアプリケーションは、実際にはこのようにする必要があります、プログレスバーコードについてのみページ、ページを埋めるためにAjaxを介してすべてのプログラムの内容は、その後、ページ内のすべてのAjaxリターンを監視するために。
時間のかかる作業のシミュレーション
全ては整っていますが、一つ対処しなければならないのは、時間のかかる操作をどのようにシミュレートするかということです。私が今持っている例は、時間がかかるものではありませんし、読み込みが遅くなることもありません。
もちろん、この目的でsetTimeoutを使うこともできますが、あまり科学的ではありませんね。そこで、ページ上にiframeを設置し、他のサイトのページを参照することで、多少なりとも読み込みに時間がかかるようにします。
ですから、この例***のコードはほとんど同じです：
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>splash screen example</title>
<link rel="stylesheet" href="nprogress.css">
<link rel="stylesheet" href="main.css">
<script src="jquery.min.js"></script>
<script src="nprogress.js"></script>
<script type="text/javascript">
$(function(){
NProgress.configure({
template: $('#splash-template').html()
});
NProgress.start();
});
$(window).load(function(){
NProgress.done();
})
</script>
</head>
<body>
<script type="text" id="splash-template">
<div class="splash card">
<div role="spinner">
<div class="spinner-icon"></div>
</div>
<p class="lead" style="text-align:center">もう戻ってこないで、立ち去るんだ。...</p>
<div class="progress">
<div class="mybar" role="bar">
</div>
</div>
</div>
</script>
<iframe id="iframe" style="width: 100%; height: 660px;" src="http://..io/SlipHover/" frameborder="0"></iframe>
</body>
</html>
造園スタイルを追加します：
CSS
html,body,iframe{
margin: 0;
padding: 0;
}
#nprogress{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f7f7f7;
z-index: 999;
}
.spinner-icon{
display: none!important;
}
.splash {
position:absolute;
top:40%;
left:0;
right:0;
margin: auto;
}
.splash img {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.card {
background-color: #f7f7f7;
padding: 20px 25px 15px;
margin: 0 auto 25px;
width: 380px;
}
.mybar {
background: #29d;
height:10px;
}
.progress {
height: 10px;
overflow: hidden;
}
これでページを実行して結果を見ることができます。以上です。効果のプレビューは私をクリックしてください。
参考
- インターセプト・ページロード ：-/-/-_/-_/-__ds
- ページ読み込み中のGmailスタイルのプログレスバー //-------ng
- /er/の
- -/////ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- .ax/
- //-----------テ
- http://。-.////---L5/
- セ
- /----ar//の
