javascript - HTML5 アプリの読み込み画面

Question

私は、多数の大きなアセット (css、js など) を取得するプロジェクト (ゲームではない) に取り組んでいます。UIWebView (iOS) でページを開くと、すべてが読み込まれる間、3 ～ 5 秒間空の白いページが表示されます。

それは避けたいです。HTML5 の読み込み画面を追加する必要があると思いますが、その方法がわかりません。ポインタはありますか？

Answer 1

ロードされるまでコンテンツを非表示にし、その間に JS を使用してロード アニメーションを表示します。

簡単なアニメーションのチェックアウト HTML5 キャンバスでの簡単なアニメーションの読み込み

Answer 2

<progress>HTML5 の要素を使用できます。ソース コードとライブ デモについては、このページを参照してください。http://purpledesign.in/blog/super-cool-loading-bar-html5/

これが進行要素です...

<progress id="progressbar" value="20" max="100"></progress>

これには 20 から始まる読み込み値があります。もちろん、要素だけでは十分ではありません。スクリプトのロード時に移動する必要があります。そのためには JQuery が必要です。以下は、0 から 100 までの進行を開始し、定義されたタイム スロットで何かを実行する単純な JQuery スクリプトです。

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

これを HTML ファイルに追加します。

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

これがあなたの始まりになることを願っています。