JQuery :: Putting Received Ajax Data Into Function

On clicking a thumbnail I'm getting it's corresponding image through $.ajax method. So, the data I receive is in the form of html string i.e. <img src="image/1.jpg"/>.
Now I wanted to append this data into a div which has an id "container". So I done this by:
$('#container').hide().append(data).fadeIn('slow');

I have a function named "resize" which resizes the image according to the window size. Now when i tried this:
// this code is in executed on success.
$('#container').hide().append(data);
resize( $('#container img') );
$('#container').fadeIn('slow');

I had to click a thumbnail twice to load the image into the container. I don't know why is it so. So, I tried a different route. I tried to apply resize function upon the <img> tag received as data and then append it to the container div.

Which I did like this:
resize ($(data)) //alerting $(data).attr('src') shows the src of the image.
$('#container').hide().append(data).fadeIn('slow');
The image loads but it is not re-sized. What should I do? The re-size function I'm talking about, u can see it here: [URL]. Right now, I'm calling the resize function in the callback of fadeIn method, the image fades in and then resizes, but that looks very ..... unprofessional and ugly.