ページに現在表示されていないイメージをブラウザにダウンロードしてキャッシュさせる方法

Question

同じページの異なるリンクをクリックすると、異なるイメージを表示するWebページがあります。画像は非常に高画質で、読み込みに多くの時間がかかります。画像をダウンロードしてキャッシュに保存してから、リンクのonclickイベントにロードします。

Answer 1

すべてを非表示の画像としてロードするだけです。

CSS：

.hidden { 
    display:none; 
} 

HTML：

<img src="/hugeImage.jpg" class="hidden" /> 
<img src="/hugeImage2.jpg" class="hidden" /> 
<img src="/hugeImage3.jpg" class="hidden" /> 
<img src="/hugeImage4.jpg" class="hidden" /> 

あなたは簡単にDOMContentLoadedイベントの後DOMへの画像のそれぞれを追加し、JavaScriptでこれをシミュレートすることができます - 同じ論理が適用されます。

var img = document.createElement('img'); 
img.setAttribute('src', '/hugeImage.jpg'); 
img.setAttribute('class','hidden'); 
document.body.appendChild(img); 

Answer 2

イメージをプリキャッシュする方法についてはこれまでの回答を参照してください。Is there a way to load images to user's cache asynchronously?

これらがロードされると、ブラウザのキャッシュ（メモリキャッシュまたはディスクキャッシュ）から来るので、クリックして表示するとほとんど瞬時に表示されます。

Answer 3

あなたのサイトでユーザーに良い体験を提供してもらいたい（また、「遅い」印象を与えないように）ために、画像を非同期的に読み込むべきですが、現在のページが読み込まれた後でなければなりません現在のページを高速に読み込みたいからです）。

あなたの現在のページが以前と同じ時間に読み込まれ、画像をプリロードすることもできます。ここ

ルック画像に非同期（あなたはjQueryのを使用しない場合は、document.readyまたは類似した何かでそれをラップしてください）ロードする方法を参照するには：

Is there a way to load images to user's cache asynchronously?