加载所有 ajax 脚本后隐藏的 gif答案

【问题标题】：Loading gif to hide when all ajax scripts have been executed加载所有 ajax 脚本后隐藏的 gif
【发布时间】：2013-06-11 03:15:13
【问题描述】：

我尝试了几种方法来让我的加载 gif 显示，然后在 ajax 脚本完成加载时隐藏。我尝试了 $j(window).load 并且我目前正在尝试将 hide() 函数放置在不同位置的加载 gif div 元素上。在函数中的其他脚本加载之前，我无法弄清楚如何显示加载 gif。你能看到我能做什么吗？（如果我注释掉所有 $j('#loading').hide() 我确实得到了显示的加载 gif）。 SimpleWithAttrPrices 函数执行一个 ajax 脚本并返回值。

function updatePrices(IDs){
    var product_id= <?=$product_id ?>;
    var qty= parseInt($j("#qtyUpdateBox input").val());
    $j('#loading').show();

    if (qty==1){
        function sendRequest(i,basePrice) {
            var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
            simpleWithAttrPrice(optionSelectionArray, function(data) {
                //var vendor = IDs[i];
                var basePrice = parseFloat(roundDollar(data));
                $j('.details'+IDs[i]+ ' .priceBlock').empty();      
                $j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
                $j('.details'+IDs[i]+ ' .priceBlock').append('<input type="hidden" name="customPrice" value="' + basePrice + '"/>');
            });
        }//end sendRequest

        for(i=0; i<IDs.length; i++)
        {   
            sendRequest(i);
            if(i=IDs.length-1){
                $j('#loading').hide();
            }
        }

        //$j('#loading').hide();
}//end if
//... THE REST OF THE FUNCTION NOT APPLICABLE

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您可以使用ajaxStart() 和ajaxStop() 在ajax 请求期间显示/隐藏加载动画。

就这么简单：

$(document).ajaxStart(function() {
  $j('#loading').show();
})
.ajaxStop(function() {
  $j('#loading').hide();
});

【讨论】：

这个可以放在任何地方吗？
是的，它可以放在任何地方。

【解决方案2】：

如果您可以轻松跟踪发送了多少请求，您可以计算在隐藏 #loading 元素之前调用了多少次 .ajaxSuccess()。

【讨论】：