Question

借口：我正在使用Ajax在交互式地图中切换SVG张图片。

我在Ajax个请求中实现了一个加载程序图片，但每次触发时，旧的SVG都会完全消失，直到添加新的SVG（导致闪烁）。

目标是让加载程序图像悬停在旧内容上，直到新SVG完全加载为止。

AJAX

$.ajax({
    type: 'POST',
    url: '/doc.php',
    data: { var: var },
    beforeSend:function(){
        $('#container').html('<div class="loader"><img src="loader.gif"/></div>');
    },
    success:function(data){
        $('#container').empty();
        $('#container').append(data);
    }
});

CSS

.loader {
    height:60px; width:60px;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 25%;
    left: 47%;
}

关于我做错的任何想法？

Answer 1

看起来他们正在删除并尝试同时填充。如果你让（数据）加载然后.delay（1000）或者任何数字工作，那么你可以通过id定位那个旧图像。另一种选择是：

complete: function(data){
$('#container').append(data).delay(1000).trigger(remove);
};

Function remove(){
$('#container').find('#fooImage').fadeToggle().remove();
};

这应该足以让新图像加载，一旦该图像启动，该功能就会删除＆＃39;触发了。

ajax loader导致内容闪烁

1 个答案: