Javascript 在jQuery中使用ajax加载html时，如何确保加载的gif在添加html之前始终可见？

我有一个ajax调用，它将一些HTML加载到DOM中。如果调用成功，我将显示一个旋转加载gif，当调用完成时，我将其隐藏。守则：

$.ajax({
    url: someUrl,
    type: 'POST',
    dataType: 'json',
    data: someData,
    success: function(response){
        $(myLoadingGif).show(); // Show the loading gif
        $(myContainer).html(response);
    },
    complete: function(){
        $(myLoadingGif).hide(); // Hide the loading gif. Note: HTML has not been added yet
    }
});

问题是：加载的gif在添加HTML之前几秒钟就被隐藏了，尽管我在ajax调用的完整部分中声明了它。我想让它一直可见。我不想做一个丑陋的1000毫秒的setTimeout（）来延迟它。我可以补充一点，加载的HTML块相当大。这是一张20-40行的桌子

---

关于如何确保gif在HTML实际添加之前保持可见的想法？

您需要在新HTML附加到DOM后隐藏gif，因此由于.HTML（）是同步的，因此调用.HTML（）后放入的任何代码都将在新HTML附加到DOM后执行。但有时会出现延迟，仅仅是因为添加了DOM，但浏览器引擎尚未渲染它，它就在那里，但没有显示。 出于这个目的，尝试一下黑客，有时它对我很有用：

$.ajax({
    url: someUrl,
    type: 'POST',
    dataType: 'json',
    data: someData,
    success: function(response){
        $(myLoadingGif).show(); // Show the loading gif
        $(myContainer).html(response);
    },
    complete: function(){
        setTimeout(function(){$(myLoadingGif).hide();},0);
    }
});

---

每次ajax调用返回值时，Success都会触发。当Ajax调用返回最后一个值时触发Complete。因为Ajax调用只返回一次值，所以success和complete将同时启动

$(myLoadingGif).show();
$.ajax({
    url: someUrl,
    type: 'POST',
    dataType: 'json',
    data: someData,
    success: function(response){
        // Show the loading gif
        $(myContainer).html(response);
        $(myLoadingGif).hide();
    },
    failure: function(){
        $(myLoadingGif).hide();
    }
    complete:function(){}        
});

---

尝试上述方法，看看是否有效。

首先，您不应该在成功时显示加载GIF，而是在发出请求之前显示。成功后几毫秒将调用Complete您是否尝试放置

$（myLoadingGif）.hide（）位于
$（myContainer.html）的正下方（响应）？或者您可以检查
$（myContainer）
元素中的高度或元素数是否发生了变化。如果数据太多，我怀疑重新绘制UI需要太多时间。您可以尝试强制重画：
$（myContainer.hide（）.html（response.show）（0，function（）{$（myLoadingGif.hide（100）；}）我的坏你在哪里完全正确！我不知道我在想什么，整个活动是在Success执行后启动的！我将尝试一种不同的方法来获得答案，一种轻微的同步黑客