Javascriptイメージプリロード、私は何か間違っています

Question

私はdocument.imagesを使用して、訪問者が最初にウェブサイトにアクセスしたときに画像を読み込みます。理由は、ロールオーバー画像を持ついくつかの異なる領域があるためです。 CSSスプライトを使用する（多くの作業を変更する）ように切り替える前に、私はここで質問します。

だから私は、これで画像をプリロードしています：

images = new Array(); 

if (document.images) { 
    images.push(preloadImage("http://website.com/images/myimg.png", 300, 200)); 
} 

function preloadImage(src, x, y) { 
    var img = new Image(x, y); 
    img.src = src; 
    return img; 
} 

とChromeの「リソース」パネルによると、これはうまく働いています。 CTRL + F5を押しても、JSにリストされている画像がダウンロードされます。

ただし、これらは使用されません。 3つのスクリプトのいずれかの要素にカーソルを合わせると、の画像がにもう一度ダウンロードされます。 Derp？

イメージをこのようにプリロードすると、そのイメージ配列を使用すると仮定します。私はブラウザが "こんにちは、これは同じ画像です、それを2度使ってみましょう"と言っても賢明だと思いましたが、明らかにそうではありません。

これは正しいですか？画像をプリロードするためにプログラムを書き直す必要はありますか？私はそれが難しいとは思わないが、それは本当にそれのために設計されていない知っている。

Answer 1

これは本当にあなたの質問に対する答えではありませんが、私は別の解決策を提案しました。ユーザーから隠されたdiv内に事前ロードする必要があるすべてのイメージを配置します。私は知っている、私は知っている、私はエレガントではないが、それは正常に動作するはずです。 :)

<div style="display: none;"> 
    <img src="http://website.com/images/myimg.png" alt=""/> 
    ... 
</div> 

Answer 2

これが私のために正常に動作します：

function imgPreload() { 
     var imageList = [ 
      "my/firstimage.png", 
      "my/secondimage.jpg", 
      "my/thirdimage.png" 
     ]; 
     for (var i = 0; i < imageList.length; i++) { 
      var imageObject = new Image(); 
      imageObject.src = imageList[i]; 
     } 
    } 

    imgPreload(); 

乾杯。フランク