Javascript 在ajax请求后完全加载图像后FadeIn

我的主要目标是将一个相当大的图像加载到我的pictureframe div中，并在加载的图像中进行淡入淡出

下面的代码运行良好，但问题是正在加载的图像没有按预期淡入

我的html页面是

<div id="picture">

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

</div>

另外，我的Java脚本函数如下

$('#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();


    }

如果你找到了答案

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


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