javascript 重定向到带有加载动画的页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3503882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redirect to page with loading animation
提问by dll32
I already know this solution.(transfer the slow loading page to a loading-interim-page which shows the animation and then redirects to the actual page)
我已经知道这个解决方案了。（将缓慢加载的页面转移到显示动画的加载临时页面，然后重定向到实际页面）
But I would really like to solve this without a redirecting page. Any clue how ? The redirect will be triggered from codebehind...
但我真的很想在没有重定向页面的情况下解决这个问题。任何线索如何？重定向将从代码隐藏触发...
回答by Ian Oxley
You could try something like this:
你可以尝试这样的事情：
<head>
...
<script type="text/javascript">
if (document.documentElement) {
document.documentElement.className = 'loading';
}
</script>
...
</head>
Stick that in your <head>tag, then add some CSS to hide everything on the page except for your loading animation. For example:
将其粘贴到您的<head>标签中，然后添加一些 CSS 以隐藏页面上除加载动画外的所有内容。例如：
.loading > body > * {
display:none;
}
.loading body {
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
}
Then add some JavaScript to clear the htmltag's class name when the page has finished loading:
然后添加一些 JavaScript 以html在页面加载完成后清除标签的类名：
// Using jQuery
$(document).ready(function() {
...
$(document.documentElement).removeClass('loading');
...
});
Hope this helps.
希望这可以帮助。
回答by Aristos
Here is an example with jQuery.
http://pure-essence.net/2010/01/29/jqueryui-dialog-as-loading-screen-replace-blockui/
这是一个 jQuery 示例。
http://pure-essence.net/2010/01/29/jqueryui-dialog-as-loading-screen-replace-blockui/
And one more simple
http://javascript.internet.com/css/pre-loading-message.html
还有一个更简单的
http://javascript.internet.com/css/pre-loading-message.html
回答by rktuxyn
You may see Example This by following this link http://onlineshoping.somee.com/This is very easy way to display loading animation, while page is loading each time.
您可以通过点击此链接http://onlineshoping.somee.com/看到示例， 这是显示加载动画的非常简单的方法，而页面每次都在加载。
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
}
else
{
Response.Write("<div id=\"loading\" style=\" text-align:center; top:100px;\"><p> Please Wait...</p><br/><img src=\"../Your Animation .gif file path\" \"width:400px\"></div>");
Response.Flush();
System.Threading.Thread.Sleep(5000);//You may increase Or decrees Thread Sleep time
Response.Write("<script>document.getElementById('loading').style.display='none';</script>");
}
}
You may download ajax custom animation .gif file from this web site http://ajaxload.info/
I hope it will solve your problem.
您可以从该网站http://ajaxload.info/下载 ajax 自定义动画 .gif 文件，
希望它能解决您的问题。
