Ajax 加载指示器答案

【问题标题】：Ajax loading indicatorAjax 加载指示器
【发布时间】：2011-03-11 10:08:16
【问题描述】：

我剪掉的这个 ajax 代码工作正常，但是如何在 div 中显示加载图像。同样的场景。

$.ajax({ url:'ajax_image_refresher.php?'+$('#frm_text').serialize(), 方法：'get'，成功：功能（数据）{ 如果（数据==''）返回； img_tag = ''; $('#wapal').html(img_tag); }

【问题讨论】：

标签： ajax

【解决方案1】：

<div id="displayStatus"></div>

jQuery('#displayStatus').html('Loading');

jQuery.ajax({
    //options
    success:function()
    {
       //your codes
       jQuery('#displayStatus').html('Loaded').delay(2000).fadeOut();
    }
});

【讨论】：

【解决方案2】：

与定义success 回调的方式相同，您可以定义beforeSend 回调。

如果您的页面某处有隐藏图像

<div id="loader" style="display: none;" >
   <img src="/images/my_groovy_ajax_loader.gif" />
</div>

您可以在beforeSend 方法中设置它的可见性并在succes 回调中再次隐藏它：

$.ajax({
     url:'ajax_image_refresher.php?'+$('#frm_text').serialize(),
     method:'get',
     beforeSend: function() {
        $("#loader").show();
     }
     success:function(data) {
        if(data =='') return;
        img_tag = '';
        $('#wapal').html(img_tag);
        $("#loader").hide();
   }
});

您可以查看jQuery ajax documentation 了解更多信息。

【讨论】：

【解决方案3】：

function performAjaxRequest() {
    // First, put the ajax loading indicator in the div.
    $("#wapal").append("<img>", { src: "ajaxLoader.gif", className: "loader"});

    // Request the new data via ajax.
    $.ajax({
        url: "whatever.wht",
        method: "get",
        success: function(data) {
            // Remove the loading indicator.
            $("#wapal").find("img.loader").remove();

            // Carry on with your function.
            //  ...
        }
    });
}

【讨论】：