title: why is return value of javascript function undefined?
body: <p>I've got a function to detect the size of an image, and I want it to return an object that contains both the width and height.  In the code below, sz.width and sz.height <em>within</em> the function hold the values, but after they return the value it's undefined.  What am I missing?</p>
  
  <pre><code>     function getImgSize(imgSrc) {
          var newImg = new Image();
  
          newImg.onload = function() {
            var height = newImg.height;
            var width = newImg.width;
  
            function s() {}
            sz = new s();
            sz.width = width;
            sz.height = height;
            $('#infunc').text("in function, w = "+sz.width+", h = "+sz.height);
            return sz;
          }
          newImg.src = imgSrc; // this must be done AFTER setting onload
        }
  
  var sz = getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg");
  $('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height);
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/forgetcolor/LbxA3/" rel="nofollow">http://jsfiddle.net/forgetcolor/LbxA3/</a></p>