レンダリング前にキャッシュに画像を挿入することは可能ですか？

Question

私はいくつかの画像を表示するこのウェブページを持っており、いくつかの画像はmouseoverイベントにあり、したがって表示に時間がかかります。 私は、マウスオーバーした画像を配置し、ブラウザのキャッシュに入れてマウスオーバーですばやく表示するdisplay noneプロパティで隠していました。私は、画像をブラウザのキャッシュに別の方法で挿入することができると考えていましたjQueryや何かを使用するようなので、私はイメージを隠しフォームに入れなくてはなりません。

これが愚かな質問であるかどうかわかりません。

ご意見ください。

よろしく ヒマンシュー・シャーマは

Answer 1

イメージをプリロードするとキャッシュに格納され、マウスイベントのようなものに対してすぐに利用できるようになります。イメージの配列をプリキャッシュするサンプルコードについては、this postを参照してください。

function preloadImages(srcs) { 
    if (!preloadImages.cache) { 
     preloadImages.cache = []; 
    } 
    var img; 
    for (var i = 0; i < srcs.length; i++) { 
     img = new Image(); 
     img.src = srcs[i]; 
     preloadImages.cache.push(img); 
    } 
} 

// then to call it, you would use this 
var imageSrcs = ["src1", "src2", "src3", "src4"]; 

preloadImages(imageSrcs); 

Answer 2

あなただけのブラウザはすべてのそれ

Answer 3

まず、小型および/または「マウスオーバー」の画像の使用スプライトをロードするようになります(new Image).src="http://path/to/img.jpg"を使用することができます。 また、はい、javascriptを使用して画像をプリロードできますが、ページの読み込み順を覚えているので、CSSより速くない可能性があります。