javascript - Ajax 等待大图像加载

Question

我需要使用 Ajax 逐步加载大图像。我只想在下一个图像完全加载时淡出最后一个图像。

我已经在所有实际浏览器中检查了几个解决方案，但似乎没有任何效果。

这就是我现在所拥有的:

<div id="imgToShow">
    <img class="imgZoomClass" src="firstimage.jpg">

此 Ajax 函数在单击时加载实际图像(路径)以及下一个图像路径:

$.ajax({
    type: "post",
    url: "../ajax/getImages",
    cache: true,
    data: "instance_id=" + $("#instance_id").val() + "&daterange=" + activeRange + "&index=" + slideIndex + "&direction=next&resolution=" + $("#resolution").val(),
    success: function(json){
    var data = jQuery.parseJSON(json);

        if(data){
            $("#imgToShow").append('<img id="imgZoom" class="imgZoomClass" data-index="'+data.index+'" data-time="'+data.time+'" data-date="'+data.date+'" src="'+data.path+'">');
            $(".imgZoomClass:first").remove().fadeOut();
        }
    }
});

这将加载下一个图像路径，将其附加到#imgToShow并删除旧图像，但这在浏览器中闪烁，因为旧图像在加载下一个图像之前或同时被删除。

对于任何帮助，我将非常感激

Answer 1

加载之前必须隐藏图像，加载图像后需要提供一些淡入效果

<div id="imgToShow">
    <img class="imgZoomClass" src="firstimage.jpg"  onload="fadeIn(this)" />
</div

// fade in effect function
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000, function(){
        $("#imgToShow").find(".imgZoomClass").not($(obj)).remove();
    });
}

$.ajax({
    type: "post",
    url: "../ajax/getImages",
    cache: true,
    data: "instance_id=" + $("#instance_id").val() + "&daterange=" + activeRange + "&index=" + slideIndex + "&direction=next&resolution=" + $("#resolution").val(),
    success: function(json){
    var data = jQuery.parseJSON(json);

        if(data){
            $("#imgToShow").append('<img id="imgZoom" onload="fadeIn(this)" style="display:none;" class="imgZoomClass" data-index="'+data.index+'" data-time="'+data.time+'" data-date="'+data.date+'" src="'+data.path+'">');
        }
    }
});

在你的 CSS 中

#imgToShow
{
    position: relative;
    width: 400px; // set custom width as you need
    height: 400px; // set custom height as you need
    border: 3px solid #000;
}

#imgToShow .imgZoomClass
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

有关更多详细信息，您可以查看 fiddle https://jsfiddle.net/rm1sxo3u/