web-dev-qa-db-ja.com

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

ブラウザにページをプリロードさせるメタタグについて読んだことを覚えています。またタグは何ですか？

htmlpreload
31
Leo Jiang

これが存在する場合、一部のユーザーエージェントはプリロードを選択する場合がありますが、それに賭けることはできません。

<link rel="next" href="http://www.example.com/link-reference">
3
Syntax Error

これは質問への良い答えではないかもしれませんが、参考までに InstantClick.js は、実際にリンクをクリックする前にリンクをプリロードできます。

それはどのように機能するのですか

訪問者がリンクをクリックする前に、そのリンクにカーソルを合わせます。これら2つのイベントの間に、通常200ミリ秒から300ミリ秒が経過します。 InstantClickはその時間を利用してページをプリロードするため、クリックしたときにページはすでにそこにあります。

2
RSK

ページをプリロードする方法はいくつかあります。

  • DNSプリフェッチ は、別のドメインからのリソースの一部が必要になることをブラウザーに通知し、DNSを可能な限り迅速に解決できるようにします。これを行うには、ドキュメントのに<link rel="dns-prefetch" href="//example.com">を追加する必要があります。これは、サードパーティの要素を使用する必要がある場合に役立ちます。
  • Preconnect はさらに一歩進んでDNSを解決するだけでなく、TCPハンドシェイクも行います。httpsに事前接続すると、TLSネゴシエーションが行われます。追加する必要があるヘッダー<link rel="preconnect" href="https://example.com/">
  • Prefetch リソースをダウンロードし、後で使用するためにブラウザのキャッシュに保存します。 <link rel="prefetch" href="imgs/image.png">を実行できます。これは、リソースをダウンロードすることが理にかなっているかどうかを判断するブラウザ次第であることに注意してください（あなたを無視するかもしれません）
  • Prerender は最も強力なオプションです。ブラウザにURLをリクエストしてすべてのアセットをダウンロードするように指示します。 <link rel="prerender" href="http://example.com/page">。あなたはその人がページを開くことをかなり確信しているべきです、そうでなければあなたは彼の帯域幅を無駄にするだけです。
2
Salvador Dali

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

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

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

私たちは jQuery HMTL5 Loader をWebアプリ（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アプリケーションに使用しました。

1
Tony Jose