如何显示 jQuery 正在工作/等待/加载？答案

【问题标题】：How to show jQuery is working/waiting/loading?如何显示 jQuery 正在工作/等待/加载？
【发布时间】：2010-05-27 08:14:06
【问题描述】：

如何向用户显示加载图片和/或消息？如果可能的话，我想知道如何让它全屏显示灰色背景。有点像查看某些画廊的大图（抱歉，没有示例链接）。

目前我是否添加了一个具有图像和其他格式的 CSS 类，但由于某种原因它无法正常工作。搜索结果确实会插入到 div 中。

HTML

<div id="searchresults"></div>

CSS

div.loading {
  background-image: url('../img/loading.gif'); 
  background-position: center;
  width: 80px;
  height: 80px;
}

$(document).ready(function(){
  $('#searchform').submit(function(){
    $('#searchresults').addClass('loading');
    $.post('search.php', $('#'+this.id).serialize(),function(result){
      $('#searchresults').html(result);
    });
    $('#searchresults').removeClass('loading');
    return false;
  });
});

【问题讨论】：

标签： jquery jquery-load jquery-post

【解决方案1】：

您的问题是您在发出 ajax 调用后立即调用removeClass('loading')，而不是在它完成后。

您可以在 ajax 回调中执行 removeClass('loading')。 $.post 只允许提供success 回调：

jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )

而且加载图片在任何情况下都应该被移除——成功或失败，所以最好使用$.ajax()的complete回调：

$('#searchform').submit(function(){
  $('#searchresults').addClass('loading');

  $.ajax({
    type: 'POST',
    url: 'search.php',
    data:  $('#'+this.id).serialize(),
    success: function(result){
      $('#searchresults').html(result);
    },
    complete: function() {
      $('#searchresults').removeClass('loading');
    }
  });
  return false;
});

在$.ajax() docs的“回调函数”部分中查看更多关于回调的信息

【讨论】：

【解决方案2】：

试试这个：

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

这将在我启动 ajax 时显示#contentLoading，这是我的进度gif，并在 ajax 停止时隐藏它。

【讨论】：