如何使用带有$ .get的图像加载器

Question

当我使用$ .get进行ajax调用时,如何使用带有$ .get的图像加载器,有时需要几秒钟才能完成效果.我如何放置一个加载器,以便用户知道等到数据加载？

谢谢

编辑:

$.ajax({
    url: 'ajax.php',
    type: 'GET',
    dataType: 'json',
    data: 'shipping=' + sval,
    onBeforeSend: function()
    {
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html("<img src='images/spinner.gif'>");
    },

    complete: function()
    {

    },

    success: function(out)
    {
        getShippingPrice = out.shippingPrice;
        getTotalPrice = out.cartTotal;
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
        $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
    }
});

EDIT2:

<script type="text/javascript">

var getShippingPrice;
var getTotalPrice;

$(document).ready(function() {
    $(".shipmethod").change(function() {
        sVal = $(this).val();
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "json",
            data: "shipping=" + sVal,

            beforeSend: function()
            {
                $('.ajaxSpinner').show();
            },

            complete: function()
            {
                $('.ajaxSpinner').hide();
            },

            success: function(out)
            {
                getShippingPrice = out.shippingPrice;
                getTotalPrice = out.cartTotal;
                $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
                $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
            }
        });
    });
});

</script>

Answer 1

你有两种可能性.

要么使用能$.ajax()为您提供更多动力的完整方法:

$.ajax({
    url: '/foo.cgi',
    type: 'GET',
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    },
    success: function(result) {
        // TODO: handle the results
    }
});

或使用该$.ajaxSetup()方法为所有ajax请求提供全局设置挂钩:

$.ajaxSetup({
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    }
});

然后$.get()照常做你的事:

$.get('/foo.cgi', function(result) {
    // TODO: handle the results
});