5 つの JavaScript ファイルがあり、それぞれサイズが異なり、CSS と同じ場合、スクリプト/CSS がダウンロードされたときに「リアルタイム」の進行状況バーを表示することは可能ですか?
これは HTML4 では不可能であり、Flash/Silverlight が必要になることはわかっています。しかし、HTML5でこれを達成できますか? はいの場合、どうすればよいですか？
「ダウンロード中」のようなテキストを表示したいのですが、各スクリプト/cssがリアルタイムでダウンロードされると、ダウンロード中の各文字がいっぱいになり始めます。私はコードを求めていません。それがどのように可能になるかについての高レベルの概念が欲しいだけです。
ありがとう。
これが私が思いついたものです。HTML5 には、<progress>使用できる要素があります。悪いニュースは、この要素のサポートが十分でないことです。こちらのサポート チャートを参照してください: http://caniuse.com/#search=progress Safari 5 以下または IE9 以下ではサポートされていません。部分的なサポートは、IE10 および関連するすべてのバージョンの FireFox で行われます。さらにサポートが必要な場合は、次のようなポリフィルを試してください: http://lea.verou.me/polyfills/progress/
この要素を使用する場合は、<progress>スタイルの設定方法に関するリンクを次に示します: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
これを機能させるための秘訣は、ダウンロードするファイルのファイル サイズとダウンロードするバイト数を知る必要があることです。ファイルがダウンロードされているので、転送されたバイト数を示すヘッダー情報を取得する必要があります。jQuery でこれを行う方法のサンプルをここで見ることができます: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results
この方法は IE では機能しないことに注意してください。IE は、XHR オブジェクトのヘッダー データを公開しません。
この時点maxで、要素の属性を<progress>合計ファイル サイズに設定し、サンプルを使用して要素の属性をsetTimeout更新します。value<progress>
これらすべてを知っていれば、組み込みの Flash フォールバックを備えたある種のパッケージ ソリューションを見つけることは、実装がはるかに簡単で、サポートが向上する可能性があります。他に何かアイデアはありますか？
幸運を。