HTML 5 холст DrawImage работает только после обновления

Question

У меня проблема с рисованием на холст, у меня есть массив информации об изображении, через которую я просматриваю и создаю объекты изображения. На каждом событии onload изображения я рисую его на холст, однако это будет работать только после обновления (как только изображения будут в кеше, похоже,).

Вот отрывок из моего кода

var image = new Image(); 
image.src = img.src; //got from elsewhere, need to draw a background image first 
image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    img.parentNode.replaceChild(canvas, img); 

    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
    context.globalCompositeOperation = 'source-over'; 

    //looping through my image info 
for (var index in anaglyphs){ 
     var anaglyph = anaglyphs[index]; 
     if (anaglyph === undefined) continue; 

     //If x, y, height and width values are set in Image then set in mask 
     //otherwise use defaults 
     var x = 0; 
     if (anaglyph.x !== undefined) x = anaglyph.x; 
     var y = 0; 
     if (anaglyph.y !== undefined) y = anaglyph.y; 
     var width = canvas.width; 
     if (anaglyph.width !== undefined) width = anaglyph.width; 
     var height = canvas.height; 
     if (anaglyph.height !== undefined) height = anaglyph.height; 
     var alpha = new Image(); 

     //Use of an intimidate function to stop javascripts closure 
     //overriding the variables before the onload event fired. Creating 
     //temporary variables in the intimidate function, which executes 
     //immediately, and storing the desired values inside them for callback. 
     (function(){ 
      var xPos = x; 
      var yPos = y; 
      var maskWidth = width; 
      var maskHeight = height; 
      alpha.onload = function() { 
       context.drawImage(this, xPos, yPos, maskHeight, maskWidth); 
      };  
     })(); 
     alpha.src = "data:"+anaglyph.content+";base64,"+encode64(anaglyph.data); 
    } 
}; 

После обновления он работает нормально, и он будет продолжать работать нормально, если я открыть веб-страницу, используя этот сценарий еще раз, однако он не сможет снова, если я очистить кеш и снова открыть страницу. Он должен работать только в последней версии Firefox.

Благодаря

Answer 1

Попробуйте положить alpha.src внутри закрытия:

(function (anaglyph,x,y,width,height){ 
    var xPos = x; 
    var yPos = y; 
    var maskWidth = width; 
    var maskHeight = height; 
    alpha.onload = function() { 
     context.drawImage(this, xPos, yPos, maskHeight, maskWidth); 
    };  
    alpha.src = "data:"+anaglyph.content+";base64,"+encode64(anaglyph.data); 
})(anaglyph,x,y,width,height); 

Кстати, почему использовать замыкание?

Как насчет простого загрузчика изображений с помощью обратного вызова вместо (просто пример):

// callback -- after all images are loaded 
function draw(images){ 
    // or whatever you want in your callback 
    context.drawImage(images.image1, 10, 10, 50,50); 
    context.drawImage(images.image2, 10, 100, 50,50); 
} 

var images = {}; 

var URLs = { 
    image1: 'ship.jpg', 
    image2: 'houseicon.png' 
}; 

LoadImages(URLs, draw); 

function LoadImages(URLs, callback) { 
    var loaded = 0; 
    var needed = 0; 
    for(var url in URLs) { needed++; } 
    for(var url in URLs) { 
    images[url] = new Image(); 
    images[url].onload = function() { 
     if(++loaded >= numImages) { 
     callback(images); 
     } 
    }; 
    images[url].src = URLs[url]; 
    } 
}