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

Chrome认为图像不是loade而是它们？

1 个答案: