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