Question

作为JQuery的新手我一直在寻找如何在加载页面时向用户显示等待图像。

页面很简单，用户登陆页面，选择多个值，然后选择一个提交按钮。

将请求提交到后端，然后返回结果然后显示。我可以在选择按钮上显示等待图像，但是当页面使用displaytag呈现结果时，没有图像。

我尝试了以下内容：

<script type="text/javascript">

  $(document).ready(function() {
    $.blockUI({ message: '<h3><img src="../images/ajax-loader.gif" /> We are loading your request.  Please be patient.</h3>' });
  });

  $(window).load(function() {
    $.unblockUI();
  });  

</script>

但这似乎不起作用。图像和消息最终显示在页面呈现期间。

如果重要，请使用IE。

Answer 1

我将假设您向服务器发送ajax请求？如果是这样，您可以使用this answer所述的jQuery的ajaxStart和ajaxStop方法。

Answer 2

使用css：

#pageLoading { 
width:100%;
height: 100%;
background: black;
position:absolute;
z-index: 1000;
top: 0px;
left:0px;
}

您可以使用其中的加载gif创建一个“掩码”。然后在加载页面时使用你的jquery fadeOut（）div。

Answer 3

加载/呈现页面后，将调用

$（document）.ready（function（）{}）。使用superUntitled答案，使用CSS，然后在加载页面后将其淡出。

Answer 4

我有另一种方式是jquery ui，特别是用于显示.gif图片的对话框小部件，其中modal: true选项用于阻止界面。然后，如果该过程完成，您可以使用$( this ).dialog( "close" )方法

简单地销毁对话框

jquery如何在页面加载期间显示等待消息

4 个答案: