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();
        }
    }
});

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

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

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;
}

有关详细信息，请查看小提琴https://jsfiddle.net/rm1sxo3u/

Answer 2

您应该为图像附加onLoad处理程序，并从那里触发删除/淡出上一个图像。类似的东西：

$(".imgZoomClass:last").on('load', function() {
    $(".imgZoomClass:first").remove().fadeOut();
});

Answer 3

您可以在success complete中写下<{1}}，而不是在jQuery中撰写逻辑。

<强>完整
  类型：函数（jqXHR jqXHR，String textStatus）

请求完成时要调用的函数（成功后和   错误回调被执行）。

Ajax等到加载大图像

3 个答案: