Redirect to page with loading animation_问答_开发者

开发者 https://www.devze.com 2023-01-12 10:41 出处：网络

I already know this solution. (transfer the slow load开发者_开发知识库ing 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...

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:

.loading > body > * {
    display:none;
}
.loading body {
    background:#fff url(../images/loading.gif) no-repeat 50% 50%;
}

Then add some JavaScript to clear the html tag's class name when the page has finished loading:

// Using jQuery
$(document).ready(function() {
    ...
    $(document.documentElement).removeClass('loading');
    ...
});

Hope this helps.

Here is an example with 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

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.

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.