すべてのアセットを使用する前にロードする単一の汎用的な方法はありますか? アプリを起動する前に、いくつかの画像、オーディオ ファイル、およびいくつかのファイルをロードしたいと考えています。現在、新しい要素.swfを作成し、 を画像パスに設定して画像をロードしています。オーディオ ファイルの場合は、 タグに 属性を追加し、をロードする要求を実行します。<img>srcpreload="auto"<audio>ajax.swf
現在ファイルをロードしている方法に問題はありますか (一部のブラウザがキャッシュしないなど)? また、コンテンツを表示する前にこれらすべてのファイル タイプをまとめてプリロードする「ベスト プラクティス」の方法はありますか?
ベストアンサー1
はい。実はこれは標準になっています。関連するRFCこれをHTML5で標準化する動きは作業中
最近のブラウザのほとんどはプリフェッチをサポートしています。プリフェッチの使用方法を簡単にまとめると次のようになります。
ファイアフォックス
MDNによれば、<link>ドキュメントの先頭にタグを使用することができます。
<link rel="prefetch" href="/assets/my-preloaded-image.png">
また、Linkリクエストに HTTP ヘッダーを設定するか、HTML 内でmetaタグとして設定することもできます。
Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here
これだけでなく、次のページが何であるかなど、ページ内でナビゲーションのヒントを提供することもできます。
<link rel="next" href="2.html">
IE11 の場合
Internet Explorerにもプリフェッチヘッダー。次のように設定できます。
<link rel="prefetch" href="http://example.com/style.css" />
DNSクエリをプリフェッチ（事前解決）することもできます
<link rel="dns-prefetch" href="http://example.com/"/>
または、ウェブページを事前レンダリングする（Google Instant のように）
<link rel="prerender" href="http://example.com/nextpage.html" />
クロム
ChromeはFirefoxやIEと同じことをするこの点について。
サファリ
Safari がこれらの機能をサポートしているかどうかについて、確かな証拠を見つけることができませんでした。しかし、多くの情報源を読んでみると、サポートしているのではないかと思います。ただ、おそらく Apple は Microsoft が IE11 を推進しているほど Safari のマーケティングに熱心ではないのでしょう (単なる意見です)。
楽しむ。 ：）
出典:
- http://msdn.microsoft.com/en-us/library/ie/dn265039%28v=vs.85%29.aspx
- https://developer.mozilla.org/en/docs/リンクプリフェッチングFAQ
- http://davidwalsh.name/html5-prefetch
- https://developers.google.com/chrome/whitepapers/prerender
- https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present#slide=id.g120f70e9a_0140
更新: この回答をまとめた後、SO で同様の回答を見つけました。この回答には、このトピックに関するより詳しい情報が記載されています。ぜひご覧ください。