如何在AJAX請求中實現jQuery微調圖像

我有一個jQuery AJAX請求，我希望在請求加載時顯示ajax spinner gif，然後在請求成功後消失，任何人都可以提出最佳方法實現這個到下面我的jQuery代碼：如何在AJAX請求中實現jQuery微調圖像

function updateCart(qty, rowid){ 
$.ajax({ 
     type: "POST", 
     url: "/cart/ajax_update_item", 
     data: { rowid: rowid, qty: qty }, 
     dataType: 'json', 
     success: function(data){     
      render_cart(data); 
     }   
    }); 
}

來源

2013-10-18 Zabs

可能的重複[如何在jQuery中顯示加載微調器？]（http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery ） –

從ajax loader（GIF圖像）獲取裝載機GIF
將這個形象要顯示/隱藏。
之前的ajax，顯示此圖片。
一旦完成，隱藏圖像

function updateCart(qty, rowid){ 
$('.loaderImage').show(); 
$.ajax({ 
     type: "POST", 
     url: "/cart/ajax_update_item", 
     data: { rowid: rowid, qty: qty }, 
     dataType: 'json',       
     success: function(data){     
      render_cart(data); 
      $('.loaderImage').hide(); 
     }, 
     error: function (response) { 
      //Handle error 
      $("#progressBar").hide(); 

    }   
    }); 
}

來源

2013-10-18 09:06:33 Praveen

完美user1671639！ :-) – Zabs

你是指async = false？我應該改變代碼中的任何東西嗎？ – Zabs

當你調用成功函數時，你實際上應該隱藏加載圖片，你不覺得嗎？ p/s：'async：false'是一個壞主意，除非你知道你在做什麼。 – Terry

我這樣做是顯示/隱藏與GIF圖像一個div。它的工作原理就像一個魅力：

<script type="text/javascript"> 

    $("#progressBar").corner(); 
    $("#progressBar").show(); 


    jQuery.ajax({ 
     url: "../Nexxus/DriveController.aspx", 
     type: "GET", 
     async: true, 
     contentType: "application/x-www-form-urlencoded", 
     //data: param, 
     success: function (response) { 
      //Manage your response. 

      //Finished processing, hide the Progress! 
      $("#progressBar").hide(); 
     }, 
     error: function (response) { 
      alert(response.responseText); 
      $("#progressBar").hide(); 

     } 
    }); 

    </script>

來源

2013-10-18 09:05:06

此外，您可以使用JavaScript圖像來確保圖像立即顯示。 – efkah

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

其中 '#loadingDiv' 是微調GIF覆蓋頁面的部分或完整的頁面。

來源

2015-09-12 12:12:49

-1

在Preloaders.net你可以找到一個非常開放的代碼，以及純JavaScript和JQuery格式的所有解釋。您也可以在那裏得到加載器圖像

來源

2017-03-23 08:30:13

如何在AJAX請求中實現jQuery微調圖像

回答

相關問題