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

Question

我有一个将一些 HTML 加载到 DOM 中的 ajax 调用。如果调用成功，我会显示一个旋转的加载 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 之前保持可见的任何想法？

Answer 1

每次您的 ajax 调用返回值时都会触发成功。当从 Ajax 调用返回最后一个值时，Complete 会触发。因为您的 Ajax 调用只返回一次值，所以成功和完成同时触发。

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

试试上面的方法，看看是否可行。

Answer 2

你需要隐藏 gif，在新的 HTML 附加到 DOM 之后，因为 .html() 是同步的，所以在调用 .html() 之后放置的任何代码都将在新的 html 附加到 DOM 后执行。但有时会出现延迟，只是因为添加了 DOM，但浏览器引擎还没有渲染它，它在那里，但没有显示。 为此目的，请尝试 hack，有时它对我很有用：

$.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);
    }
});