4

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

目前我是否添加了一个具有图像和其他格式的 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;
  });
});
4

2 回答 2

2

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

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

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

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

$('#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() 文档的“回调函数”部分查看更多关于回调的信息

于 2010-05-27T08:49:39.040 回答
0

试试这个：

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

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

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

于 2010-05-27T14:55:11.860 回答