javascript - Javascript image onload not firing when loading from local file

Question

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.

Here is an example of what I'm trying to do:

if (input.target.files && 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('<option value="0">' + bullet.title + '</option>');
            $('#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]);
}

Answer 1

bullet.src should be bullet.image.src