Chromeは画像が読み込まれていないと思っていますか？

Question

キャンバスにいくつかのイメージを描画しようとしています。イメージを描画するときにイメージがロードされるように、配列を使用してイメージをプリロードします。私は再び

<snip> 
this.img = new Image(); 
img.src = images[id].src; 
</snip> 

これはFirefoxとOperaではなく、Chromeで動作する画像を使用する場所startDoingStuffをプリロードした後

var num = 0, 
    length = 3, 
    images = { 
     img1: '/img/img1.png', 
     img2: '/img/img2.png', 
     img3: '/img/img3.png' 
    } 


for(var i in images) 
{ 
    var tmp = new Image(); 
    tmp.src = images[i]; 
    tmp.onload = function() 
    { 
     num ++; 
     if(num == length) 
     { 
      startDoingStuff(); 
     } 
    } 
} 

が発射されます。クロムは画像がロードされていないと考えているでしょう。/

これを解決するために私が見つけたのは、読み込まれた画像を別の配列に置く（または元の配列を上書きする）ことで、参照を保持することです。

なぜChromeは画像をキャッシュに保存しているのか分かりません。

Answer 1

画像をプリロードするためのコードはあまり正確ではありません。次の機能をお試しください：

function preloadImages(images,callback){ 
    var img,imgs,finished=0,onLoadError; 

    if(images instanceof Array)imgs=images; 
    else{ 
    imgs=[]; 
    for(var p in images)if(images.hasOwnProperty(p))imgs.push(images[p]); 
    } 

    onLoadError=function(ev){ 
    //ev=ev||window.event; 
    // ev.type can be used to check 
    // when image is loaded succ (ev.type==="load") 
    // or fail (ev.type==="error") 
    finished++; 
    if(finished===imgs.length)callback(); 
    }; 

    for(var i=0;i<imgs.length;i++){ 
    img=new Image(); 
    img.onload=img.onerror=onLoadError; 
    img.src=imgs[i]; // NOTE: .src must be assigned after .onload and .onerror! 
    } 
} 

あなたは、次の例のように、この機能を使用することができます。

preloadImages({ img1: '/img/img1.png', 
       img2: '/img/img2.png', 
       img3: '/img/img3.png' }, 
       startDoingStuff); 

// or 

preloadImages([ '/img/img1.png', 
       '/img/img2.png', 
       '/img/img3.png' ], 
       startDoingStuff);