title: Javascript image onload not firing when loading from local file
body: <p>I'm trying to give the user a preview of how an image will look when combined with another image before they upload the image (think gun shooting a bullet). I can get the image to load into an image element, but then the onload event doesn't fire (tested in chrome and firefox). I've tried using setTimeout as a dirty hack, but unfortunately bullet.image.height does not appear to be set within a relatively short space of time.</p>
  
  <p>Here is an example of what I'm trying to do:</p>
  
  <pre><code>if (input.target.files &amp;&amp; input.target.files[0]) {
      var file = new FileReader();
  
      file.onload = function (event) {
          // this part works fine
          var bullet = {};
          bullet.id = 0;
          bullet.image = new Image();
          bullet.image.onload = function () {
              // This never fires
              bullet.offset_y = bullet.image.height / 2;
  
              $('#modal-weapons-field-bullet').append('&lt;option value="0"&gt;' + bullet.title + '&lt;/option&gt;');
              $('#modal-weapons-field-bullet').val(0);
          };
  
          bullet.src = event.target.result;
          bullet.offset_x = 0;
          bullet.title = input.target.files[0].name;
      }
  
      file.readAsDataURL(input.target.files[0]);
  }
  </code></pre>