javascript - ファイルのセットがプリロードされている間、読み込みバーを表示する

Question

ビデオの背景 (重いビデオ) といくつかの画像と js ファイルを含むページを作成したいと考えています。

すべてが非常に重いので、これらすべてのファイルがキャッシュされている間に読み込みバーを表示してから、ビデオを含む他のすべての表示を開始したいと考えています。

これが少し曖昧であることは認めますが、この質問にフラグを立てないでください! 私は自分で答えを探してきましたが、明らかに検索クエリが正しくありません。実際に良い検索結果を得るためのリンクまたは適切な用語を教えていただければ幸いです。

Answer 1

1) プログレスバー

<progress>ブラウザの互換性にこだわりがない場合は、新しいタグを使用できます。このブログでは非常によく説明されており、互換性の問題を説明する別のブログへのリンクがあります。

2) ビデオイベント

進行状況を宣言して追跡するには、このようなコードを追加するだけです

html

<video id="myVideo" src="somewhere"/>
<progress id="progressBar"/>

js

$('#myBackgroundVideo').bind("progress",function(e){
   if(e.lengthComputable){
      var percentage = Math.round((e.loaded * 100) / e.total);
      $("#progress").prop("value", percentage) 
   }
);