Getting the height of the image to set modal window size

Getting the height of the image to set modal window size

I am creating a photo gallery with thumbnails and loads the resized image
into the modal window.
The problem is I want to get the height and width of the image to set the
height of the modal window, however the height is not being set on the
modal window or my container for my image.
The src of the image is not in my markup originally but I add it to the
markup by appending it on the fly.
Original Thumbnail Image
<img src="\images\picture1.jpg" height="150" width="150" id="thumbnail">
Jquery code:
var tImageID = $(this).find('img').attr( 'id', 'thumbnail' );
var fullURL = $(tImageID).attr('src');
var dFigure = $('#dialog-media figure .media');
// fullSrcURL = "\images\picture_resized.jpg"
var fullSrcURL = fullURL.replace(".jpg", "_resized.jpg");
// Add html to the div tag
$(dFigure).append('<img id="resized-pic" src="' + fullSrcURL + '"
alt="' + $(tImage).attr('alt') + '" />');
var objHeight = $("#resized-pic").height();
var objWidth = $("#resized-pic").width();
// Perform some other code here
// Some more logic
//Set the positioning of the modal window with theses CSS properties
$('.ui-dialog').css('left', '0');
$('.ui-dialog').css('right', '0');
$('.ui-dialog').css('margin', '0 auto');
$('.ui-dialog').css('width', objWidth);
$('.ui-dialog').css('height', ObjHeight);
$('.ui-dialog').css('top', '5%');
The picture loads up, but the objWidth and objHeight show up as zero when
looking at firebug.
I refresh my page, click on the same thumbail and the picture loads up
with the image within the modal and the height of the modal is set
properly.
Is it because the picture hasn't completely loaded and that is why it is
zero? Or is it because it is cached?
Thanks
Cheers