11

我有一个 jQuery AJAX 请求,我想在请求加载时显示一个 ajax spinner gif,然后在请求成功后消失,任何人都可以建议在下面的 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);
        }           
    });
}
4

4 回答 4

31
  1. ajax 加载器(GIF 图像)获取加载器 gif
  2. 将此图像放置在您要显示/隐藏的位置。
  3. 在 ajax 之前,显示此图像
  4. 完成后,隐藏图像

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-18T09:06:33.637 回答
8
var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

其中“#loadingDiv”是覆盖页面部分或整个页面的微调器 gif。

于 2015-09-12T12:12:49.723 回答
4

我这样做显示/隐藏带有 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-18T09:05:06.550 回答
-1

Preloaders.net上,您可以找到非常开放的代码以及纯 JavaScript 和 JQuery 格式的所有解释。您也可以在那里获取加载程序图像

于 2017-03-23T08:30:13.473 回答