jquery如何在页面加载期间显示等待消息
作为 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我假设您向服务器发送 ajax 请求?如果是这样,您可以利用 jQuery 的
ajaxStart
和ajaxStop
方法,如 这个答案。I'm going to assume your sending an ajax request to the server? If so, you can utilize jQuery's
ajaxStart
andajaxStop
methods as described by this answer.使用 css:
您可以创建一个“掩码”,其中包含加载 gif。然后在页面加载时使用 jquery fadeOut() div。
Using css:
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.
$(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.
我还有另一种方法是 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 themodal: true
option for blocking the interface . Then if the process finished you can simply destroy the dialog using$( this ).dialog( "close" )
method