jquery - 如何显示 jQuery 正在工作/等待/加载？

Question

如何向用户显示加载图片和/或消息？ 如果可能的话，我想知道如何使其全屏显示并带有灰色调暗的背景。有点像从一些画廊查看大图片时(抱歉，没有示例链接)。

目前我添加了一个包含图像和其他格式的 CSS 类，但由于某种原因它不起作用。 搜索结果确实会插入到 div 中。

HTML

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

CSS

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

JS

$(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;
  });
});

Answer 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 中的“回调函数”部分。