web-dev-qa-db-ja.com

HTML5でロード画面を作成する

HTML5に関して読み込みスタイル画面を生成するための適切なチュートリアルを見つけるのにいくつか問題があります。正直に言うと、どこから始めればいいのか正確にはわかりません...

私のプロジェクトは基本的にシンプルなHTML5ゲームで、さまざまなスプライトシートとタイルセットをロードします。それらはかなり小さくなりますが、すべてのリソースが読み込まれている間、空白の画面ではなく小さな読み込みスピナーを表示したいと思います。

誰かが私を正しい方向に向けることができれば、大いに感謝します。それは私を動かすための適切なリンクまたはコードサンプルです...私のGoogle-fuには今日欠けています！

明確にするために、スピナーを見つけるのではなく、リソース自体をロードする方法を理解する必要があります。たとえば、X％が読み込まれたことを計算する方法。

編集2

愚かな私、私は<variable>.image.complete。閉鎖に投票しました。

javascripthtmlloading
13
the_e

このWebサイトは、アニメーションのロードGIFに最適です http://ajaxload.info/ 。オーバーレイを使用して画像を表示し、読み込み中のページとの相互作用を防ぐこともできます。 divを使用して、何よりも上に配置し（z-index）、幅と高さを100%に設定できます。

10
Chris Laplante

古い質問ですが、Imageオブジェクトにもonloadイベントがあることを知っておくと便利です。多くの場合、たとえばループで完了を確認するよりも、それを使用する方が優れています。

使用例（実際に機能している場合はチェックされません）：

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 2){
        // Do some stuff like remove loading screen or redirect to other URL
    }
}    

image1 = new Image();
image1.src = "image1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "image2.jpg"
image2.onload = incrementAndCheckLoading;
9
dtech

これは、HTML5 CSSアニメーションをデモするための優れたリソースです。 http://slides.html5rocks.com/#css-animation

 @-webkit-keyframes Pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: Pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

これは、ロードステータスバーの作成方法を示しています。 http://slides.html5rocks.com/#semantic-tags-2

 <progress>working...</progress>

これらのスライドには、探しているものが含まれている可能性のある他の例もたくさんあります。

3
jmort253

HTML5では<progress>要素を使用できます。ソースコードとライブデモについては、このページをご覧ください。 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>

これがあなたにスタートを与えることを願っています。

2
Raj Sharma

この質問にはhtml5のタグが付いているため、スピナーgifよりも上手にできると思います。より近代的な代替：

http://fgnass.github.io/spin.js/

1
Fdr