Jquery Ajax 加载图像

Question

我想为我的 jquery ajax 代码实现加载图像(这是当 jquery 仍在处理时)，下面是我的代码:

$.ajax({
    type: "GET",
    url: surl,
    dataType: "jsonp",
    cache : false,
    jsonp : "onJSONPLoad",
    jsonpCallback: "newarticlescallback",
    crossDomain: "true",
    success: function(response) {
        alert("Success");
    },
    error: function (xhr, status) { 
        alert('Unknown error ' + status);
    }   
});

如何在此代码中实现加载图像。谢谢

Answer 1

描述

您应该使用jQuery.ajaxStart 和jQuery.ajaxStop 来执行此操作。

1. 使用您的图像创建一个 div
2. 使其在 jQuery.ajaxStart 中可见
3. 在 jQuery.ajaxStop 中隐藏它

示例

<div id="loading" style="display:none">Your Image</div>

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script>
    $(function () {
        var loading = $("#loading");
        $(document).ajaxStart(function () {
            loading.show();
        });

        $(document).ajaxStop(function () {
            loading.hide();
        });

        $("#startAjaxRequest").click(function () {
            $.ajax({
                url: "http://www.google.com",
                // ... 
            });
        });
    });
</script>

<button id="startAjaxRequest">Start</button>

更多信息

• jQuery.ajaxStart()
• jQuery.ajaxStop()