FadeIn an Image after being fully loaded after ajax request

Question

My main objective is to a load a reasonably large image in to my #pictureframe div and fadeIn the loaded image.

The following code works well but the problem is that the image that is being loaded is not fading In as expected.

My html page is

<div id="picture">

    <div id="pictureframe">
    </div>

</div>

Also my Java script function is as follows

$('#content').on('click',".lstimages .imgthumb",(function(){


    var photoid = $(this).attr('alt');

    $.ajax({
    dataType: "json",
    url: '/ajax/pictureview/load/' + photoid,
    success: loadImg
    ,
    error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
    }
    });


    }));


    function loadImg(data)
    {

        $('#picture > #pictureframe').hide().html("<img alt='"+ data[0].pictureid +"' src='"+ data[0].filepath + "'>").fadeIn();


    }

Answer 1

if found the answer

$('#picture > #pictureframe').hide().html("<img alt='"+ data[0].pictureid +"' src='"+ data[0].filepath + "'>");


$('#picture > #pictureframe img').bind("load", function() {
        $('#picture > #pictureframe').fadeIn();  
});