Chrome 认为图像不是负载，但实际上它们是负载？

Question

我试图在画布上绘制一些图像，为了确保在绘制图像时加载图像，我使用数组预加载它们。

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();
        }
    }
}

预加载后，startDoingStuff 被触发，我再次使用图像，

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

这在 Firefox 和 Opera 中有效，但在 Chrome 中无效。 Chrome 可能认为图像未加载，因为如果我再进行一次加载，它就会起作用。这是愚蠢的，因为图像已经加载：/

我发现解决这个问题的唯一方法是将加载的图像放入另一个数组中（或覆盖原始数组），从而保留引用。

为什么 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);