拖延显示图像，直到通过ajax完全加载html结果

Question

我知道很多问题已经被问到这个问题，但我仍然不是让我的头围绕它。 我有一些图片，点击后，我通过ajax获得大图片。来自ajax的一个负载进入我选择的div的结果。原因是我打算在页面上使用其他信息，即Ajax返回。 获取返回的html包含img标签，我想暂缓显示图像，直到完全加载。 这里是我到目前为止有：

function getimage(sent_data){ 
$("#gallery").hide() 
    $.ajax({ 
     type: "GET", 
     url: "gallery/name.php?", 
     data: "id=" + sent_data, 
     success: callback 
    }); 
} 
function callback(data, status){ 
     $("#gallery").html('').hide(); // you need to remove the old image 
     $("#gallery").removeClass("loading").html(data).fadeIn("slow"); 
} 

和返回的数据是：

<a href="test.jpg" class = "cloud-zoom" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"> 
    <img src="test.jpg" width="450" height="301" alt="johnboy"/></a> 

谢谢。

Answer 1

我还没有尝试过，但这应该工作。

当你从你的服务器得到你的html数据时，将返回的html放在不显示的位置，然后向你的gallery元素添加载入处理程序，并在载入时显示你的html。

$("#gallery").load(function(e) { 
    $(this).show(); 
}); 

function callback(data, status){ 
    //edit: you must place your returned data 
    $("#gallery").html(data).hide(); // you need to remove the old image 
}