在ajax請求后完全加載后淡入圖像

Question

我的主要目的是將相當大的圖像加載到我的#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();


    }

Answer 1

如果找到答案

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


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