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