2012-08-02 7 views
5

もし私が5つのjavascriptファイルを持っていて、CSSのサイズとサイズが異なっていて、scripts/cssがダウンロードされたら "リアルタイム"プログレスバーを表示することは可能ですか?HTML5のダウンロード状況

これはHTML4では不可能であり、Flash/Silverlightが必要なことは知っています。しかし、私はHTML5でこれを達成できますか?はいの場合、どうすればいいですか?

「ダウンロード中」のようなテキストを表示したいと思います。各スクリプト/ CSSがリアルタイムでダウンロードされるたびに、ダウンロードの各文字がいっぱいになるはずです。私はコードを要求していません。それがどのように可能であるかについての高レベルの概念がほしいだけです。

ありがとうございました。

+0

プリローダーのようなものをお探しですか? –

+0

@Johndave Decano:はい、資産がダウンロードされるにつれて、私の手紙は色が塗りつぶされるはずです。 – Jack

+2

これは答えではなく、考慮すべきことです。ほとんどのWeb開発者は、できるだけ早く資産をロードしてユーザーに最高のエクスペリエンスを提供する方法を見つけるために時間を費やしています。プリローダーを見せたい場合は、ロードタイム、帯域幅の使用量、要求を減らすなど、実際の問題を避けることができます。 – Phortuin

答えて

3

ここに私が思いついたことがあります。 HTML5には、あなたが使用できるかもしれない<progress>要素があります。悪い知らせは、この要素のサポートがそれほど良いものではないということです。以下のサポートチャートをご覧ください:http://caniuse.com/#search=progress Safari 5以下、またはIE9以下ではサポートがありません。部分的なサポートはIE10とFireFoxの関連版にあります。あなたが<progress>要素を使用することを選択した場合は、ここでそれをスタイリングする方法についてのリンクですhttp://lea.verou.me/polyfills/progress/

:あなたはよ、今http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

この作業を行うことについてのトリックは、あなたがより多くのサポートが必要な場合は、このようなpolyfilを試してみてくださいダウンロードするファイルのファイルサイズとダウンロードしたバイト数を知る必要があります。ファイルがダウンロードされているので、転送されるバイト数を示すヘッダー情報を取得する必要があります。 http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results

このメソッドはIEでは動作しません。 IEはXHRオブジェクトのヘッダデータを公開しません。この時点で

は、総ファイルサイズに<progress>要素のmax属性を設定し、setTimeoutサンプルを使用して、<progress>要素のvalue属性を更新します。

このことをすべて知っていると、組み込みのFlashフォールバックを備えたパッケージ解決策を見つけるのがずっと簡単になり、サポートが向上するかもしれません。他に誰かが考えている?

幸運。

関連する問題