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

发布于 2024-10-18 15:49:36 字数 555 浏览 2 评论 0原文

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

该页面很简单,用户登陆该页面,选择几个值,然后选择提交按钮。

向后端提交请求,然后返回结果然后显示。我能够在选择按钮上显示等待图像,但是当页面使用显示标签呈现结果时,没有图像。

我尝试了以下方法:

<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。

Being new to JQuery I have been hunting around to see how I can show a wait image to the user upon the loading of a page.

the page is simple, user lands on the page, and selects several values and then selects a submit button.

Submits the request to the back end and then the results are returned and then displayed. I am able to show a wait image upon the select button, but when the page is rendering the results using displaytag there is no image.

I tried the following:

<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>

But that did not seem to work. The image and message show up at the very end not during the rendering of the page.

Using IE if that matters.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

江南月 2024-10-25 15:49:36

我假设您向服务器发送 ajax 请求?如果是这样,您可以利用 jQuery 的 ajaxStartajaxStop 方法,如 这个答案

I'm going to assume your sending an ajax request to the server? If so, you can utilize jQuery's ajaxStart and ajaxStop methods as described by this answer.

以可爱出名 2024-10-25 15:49:36

使用 css:

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

您可以创建一个“掩码”,其中包含加载 gif。然后在页面加载时使用 jquery fadeOut() div。

Using css:

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

You could create a 'mask' with your loading gif inside of it. Then use your jquery to fadeOut() the div when the page is loaded.

小女人ら 2024-10-25 15:49:36

$(document).ready(function(){}) 在页面加载/渲染后调用。使用 superUntitled 答案,使用 CSS,然后在页面加载后淡出。

$(document).ready(function(){}) is called after the page is loaded / rendered. Go with superUntitled answer, use CSS and then fade it out after the page is loaded.

谁对谁错谁最难过 2024-10-25 15:49:36

我还有另一种方法是 jquery ui,特别是用于显示 .gif 图片,带有用于阻止界面的 modal: true 选项。然后,如果该过程完成,您可以使用 $( this ).dialog( "close" ) 方法简单地销毁对话框

I have another way is the jquery ui, specificly the dialog widget for displaying a .gif picture with the modal: true option for blocking the interface . Then if the process finished you can simply destroy the dialog using $( this ).dialog( "close" ) method

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文