web-dev-qa-db-ja.com

すべてのアセットをプリロードする

使用する前にすべてのアセットをロードする単一のユニバーサルな方法はありますか？アプリを起動する前に、いくつかの画像、音声ファイル、およびいくつかの.swfファイルをロードしたいと考えています。現在、新しい<img>要素を作成し、srcを画像パスに設定することで画像を読み込んでいます。オーディオファイルの場合、preload="auto"タグに<audio>属性を追加しますajaxリクエストを実行して.swfsをロードします。

現在ファイルをロードしている方法に問題がありますか（一部のブラウザはキャッシュしないなど）、コンテンツを表示する前にこれらすべてのファイルタイプをまとめてプリロードする「ベストプラクティス」の方法はありますか？

javascriptjqueryhtmlpreload
27
alh

はい。実際、これは標準化されています。関連する [〜＃〜] rfc [〜＃〜] です。これをHTML5向けに標準化する動きは 動作中 です。

最近のほとんどのブラウザはプリフェッチをサポートしています。以下は、それらの使用方法の簡単な要約です。

Firefox

MDNに従って、<link>タグはドキュメントのヘッドにあり、

<link rel="prefetch" href="/assets/my-preloaded-image.png">

また、リクエストでHTTP Linkヘッダーを設定するか、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">

IE 11

Internet Explorerにも Prefetch ヘッダーがあります。次のように設定できます：

<link rel="prefetch" href="http://example.com/style.css" />

DNSクエリをプリフェッチ（事前解決）することもできます

<link rel="dns-prefetch" href="http://example.com/"/>

または、Webページを事前レンダリングします（a-la Google Instant）

<link rel="prerender" href="http://example.com/nextpage.html" />

Chrome

ChromeもFirefoxと同じことを行い、IE in this regard 。

サファリ

Safariがこれらの機能をサポートしているかどうかの確かな証拠を見つけることはできませんでした。しかし、おそらくAppleは、MicrosoftがIE11（単なる意見）を推進しているため、Safariを売り込むのにそれほど熱心ではありません）。

楽しんで。 :)

出典：

更新：この回答をコンパイルした後、私はSOで同様の回答に出くわしました。ぜひご覧ください。

HTML5を使用してページをプリロードするにはどうすればよいですか？

38
kumarharsh

アセットをプリアロードすることは、FLASHからHTML5への変換プロジェクトを実行したため、FLASHまたはHTML5プロジェクトで最も困難かつ最も単純なタスクの1つです。

最も簡単な種類のプリローダーは、それらが存在するムービーをロードするために使用される静的プリローダーです。これらのプリローダーの場合、必要なのは、通常はムービーの最初のフレームであるプリローダー画面でムービーを停止し、ムービーがFlashプレーヤーに完全にロードされたことを確認できるまでそのままにしておきます。

プリローダーは、Webページでキャッシュされていない画像を変更するときに、表示が必要になるたびに同じ画像をサーバーからダウンロードする必要があるため、ちらつきや遅延も停止します。

jQuery HMTL5 Loader をウェブアプリで使用しました（HTML5）、あなたは Github Repo はこちら。

このプラグインは、プリロードする必要のあるファイルを取得するためにJSONファイルを必要とし、画像、html5ビデオおよびオーディオソース、スクリプトおよびテキストファイルをプリロードできます。これに加えて、異なるタイプのローダー（円形、ライン、大きなカウンターなど）と追加機能などを備えています。

このように実装されています。

<script>
        var loaderAnimation = $("#html5Loader").LoaderAnimation();
        $.html5Loader({getFilesToLoadJSON:'json file',
            onUpdate: loaderAnimation.update,
            debugMode:false
        });
    </script>

Chrome、FireFox、Safari、Operaなどのさまざまなブラウザーやモバイルブラウザーで完全に機能します。

注：これは、AndroidおよびiOSを含む）の異なるプラットフォームで実行されるHTML5 Webアプリケーションに使用しました。

24
Tony Jose

PreloadJS ライブラリを使用できます（これはCreateJSスイートの一部です）。軽量で使いやすく、構成の点で非常に強力です。キューイング、複数の接続、一時停止などが可能です。（進行、完了など）イベントへのアクセスを提供します。

Actionscriptの経験がある場合、このツールは非常に簡単です。

2
strah

$(window).load(function(){ /* Use any of your resources */ });を使用してみてください。

これを試してみました。 これ 。これはプレーンなJavaScript APIなので、window.onload=function(){/* JavaScriptCode */};のように使用することもできます。

1
Siva Tumma

私はPxLoaderに本当に満足しています： http://thinkpixellab.com/pxloader/

これは、HTML5アプリで使用する非常に使いやすい軽量のプリローダーです。画像、音声、その他のファイル形式をダウンロードできます。完了したイベントも監視できます。

使用は無料（MITライセンス）で、GitHubでforkableです。

ここにいくつかの良いデモとスクリプトのサンプルがあります： http://thinkpixellab.com/pxloader/#sample1

0
Bangkokian