加载gif隐藏当所有的ajax脚本已经执行

Loading gif to hide when all ajax scripts have been executed

本文关键字：脚本 ajax 执行 gif 隐藏 加载      更新时间：2023-09-26

我尝试了几种方法来显示我的加载gif，然后在ajax脚本完成加载时隐藏。我试了$j(窗口)。加载，我目前试图将隐藏()函数加载在不同的地方的gifdiv元素。我不知道如何显示加载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

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

就是这么简单:

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

如果你很容易跟踪你发出了多少请求，你可以在隐藏#loading元素之前计算.ajaxSuccess()被调用的次数。

相关文章：