Ajax加载器导致内容闪烁

ajax loader causing content to flicker

本文关键字：闪烁 加载 Ajax      更新时间：2023-09-26

借口:我正在使用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%;
}

你知道我做错了什么吗?

看起来他们正在删除并试图同时填充。如果你让(data)加载，然后。delay(1000)或任何数字，然后通过id定位旧图像，你可以做到这一点。另一个选项是:

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

这应该有足够的时间来加载新图像，一旦1秒结束，函数'remove'就会被触发。

相关文章：