[英]Show loading image and text while aspx page is loading
I have a page which when it is opened it starts running a method that takes 40 to 60 seconds to complete.我有一个页面,当它打开时,它开始运行一个需要 40 到 60 秒才能完成的方法。 I put a loading circle gif on the page but it doesn't appear until after the code is finished working.我在页面上放了一个加载圆圈 gif,但直到代码完成工作后它才会出现。 How can I make sure that the image is visible first?如何确保图像首先可见?
Update:更新:
I can successfully get a task to run my code after the gif appears.在 gif 出现后,我可以成功获得运行我的代码的任务。 However, i need to either update the page or open another page after the task is complete.但是,我需要在任务完成后更新页面或打开另一个页面。 I have attempted the code below.我已经尝试了下面的代码。 When the testLabel.visible = true
line is hit the label does not appear.当testLabel.visible = true
行被击中时,标签不会出现。
Any guidance to what i am doing wrong would be massively appreciated.对我做错了什么的任何指导将不胜感激。
Code:代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
User currentUser = (User)Session["user"];
Task task = new Task(() => StartProcessingAsync(currentUser));
task.Start();
}
}
public async void StartProcessingAsync(User currentUser)
{
await AsyncProcessing(currentUser);
testLabel.Visible = true;
}
private async Task AsyncProcessing(User currentUser)
{
Company newCompany = CreateCompany();
CreateUsers(newCompany, currentUser);
}
Try this:尝试这个:
$(function () {
$("#btnSubmit").click(function () {
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
}
});
});
<div id="loading">
<div id="loadingcontent">
<p id="loadingspinner">
Loading...
</p>
</div>
</div>
<style>
#loading {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
z-index: 1000;
}
#loadingcontent {
display: table;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#loadingspinner {
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: center;
font-size: larger;
padding-top: 80px;
}
</style>
Source: Waiting spinner for long-running form submits in ASP MVC3 Razor using jQuery来源: 使用 jQuery 在 ASP MVC3 Razor 中等待长时间运行的表单提交的微调器
I ended up building the long running method into a ASP.net RESTful web API which I call asynchronously when the page is loaded.我最终将长时间运行的方法构建到 ASP.net RESTful Web API 中,我在加载页面时异步调用该 API。 I have eliminated any waiting required on the page and an email is sent to the logged in user when it has finished running which gives them the results.我已经消除了页面上所需的任何等待,并在完成运行后向登录用户发送一封电子邮件,并为他们提供结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.