推迟显示图像，直到通过 ajax 完全加载到 html 结果中

Question

我知道有人问过很多关于这个问题的问题，但我仍然无法解决这个问题。 我有许多图像，当单击时，我通过 ajax 获得大图像。 ajax 的结果是进入我选择的 div 的大量 html。这样做的原因是我计划在 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 但不显示，然后将加载处理程序添加到您的画廊元素，并在加载时显示您的 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
}