image,onload event not working in chrome

Explanation from chromium tracker:

This is not a bug. WebKit is just more strict. You must instantiate a new Image() object before the replacement, like this:

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

source: http://code.google.com/p/chromium/issues/detail?id=7731#c12


This is strange, none of the above worked for me. I was defining the image variable as local and change it to global and it started working. Does this make sense? Can somebody explain it?

This didnt worked for me:

function loadImage() {  
  var ImageToLoad = new Image();
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}

This did work:

  var ImageToLoad = new Image();
  function loadImage() {
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}