Summary Asp.net page loading animation (solving the white screen problem)

I have been looking for the loading when loading the Asp.net page for the past two days. There are basically three types of pages.

First, implement it using JS (or Ajax), write a DIV at the top of the page, and hide it after the page is loaded.

Disadvantage: This method is good for loading images. If the background code is executed for a long time, it will take a long time for the white screen.

Second, it is composed of response. Write + response. Flush. If there is a lot of BIND content in the background, the time bar will be displayed as soon as possible and will not be stuck on the white screen for a long time.

Disadvantage: In. net, response. Write is output at the top by default, which affects the display of CSS and destroys the HTML structure. If yourCodeIf there is an operation cookie or response. Redirect, an error will occur. (response. Flush first and then cookie or redirect will cause an error)

Third: Use Page. registerstartupscript + response. flush, I want to tell you that this method is not used at all. It is the same as the first one. If the background code is long, it will still be white for a long time, don't believe it (sleep (10000) Try)

I haven't found a proper answer for a long time, and finally decided to manually modify the online code to implement the functions we need.

Effect: http://www.bangso.com/blog/default.aspx? Bun = yeagen

Code

# Region "Page loading effect"
///   <Summary>
/// Page loading effect
///   </Summary>
Public   Static   Void Initjavascript ()
{
String UA = Httpcontext. Current. Request. useragent. tolower ();
If (Httpcontext. Current. session [ " Blog " ] =   Null   &&   ! UA. Contains ( " Bot " ) &&   ! UA. Contains ( " Spider " ) &&   ! UA. Contains ( " Slurp " ) &&   ! UA. Contains ( " Google " ) &&   ! UA. Contains ( " Baidu " ))
{
String F =   String . Empty;
F + =   " <Script language = JavaScript type = text/JavaScript> " ;
F + =   " VaR t_id = setinterval (animate, 20 ); " ;
F + =   " VaR Pos = 0; var dir = 2; var Len = 0; " ;
F + =   " Function animate (){ " ;
F + =   " VaR ELEM = Document. getelementbyid ('progress '); " ;
F + =   " If (ELEM! = NULL ){ " ;
F + =   " If (Pos = 0) Len + = dir; " ;
F + =   " If (LEN> 32 | POS> 79) POS + = dir; " ;
F + =   " If (Pos> 79) len-= dir; " ;
F + =   " If (Pos> 79 & Len = 0) Pos = 0; " ;
F + =   " ELEM. style. Left = Pos; " ;
F + =   " ELEM. style. width = Len; " ;
F + =   " }} " ;
F + =   " </SCRIPT> " ;
F + =   " <Style> " ;
F + =   " # Loader_container {text-align: center; position: fixed; _ Position: absolute; top: 40%; width: 100%; left: 0 ;} " ;
F + =   " # Loader {font-family: tahoma, Helvetica, SANS; font-size: 11.5px; color: #000000; Background-color: # ffffff; padding: 10px 0 16px 0; margin: 0 auto; display: block; width: 130px; Border: 1px solid # 5a667b; text-align: Left; Z-index: 2 ;} " ;
F + =   " # Progress {Height: 5px; font-size: 1px; width: 1px; position: relative; top: 1px; left: 0px; Background-color: #8894a8 ;} " ;
F + =   " # Loader_bg {background-color: # e4e7eb; position: relative; top: 8px; left: 8px; Height: 7px; width: 113px; font-size: 1px ;} " ;
F + =   " </Style> " ;
F + =   " <Div id = loader_container> " ;
F + =   " <Div id = loader> " ;
F + =   " <Div align = center> loading page... </div> " ;
F + =   " <Div id = loader_bg> <Div id = progress> </div> " ;
F + =   " </Div> " ;
Httpcontext. Current. session [ " Blog " ] =   " Billpeng " ;
Httpcontext. Current. response. Write (F +   " <SCRIPT> location. Replace (' "   + Httpcontext. Current. Request. url. tostring () +   " '); </SCRIPT> " );
Httpcontext. Current. response. Flush ();
Httpcontext. Current. response. End ();
}
Else
{
Httpcontext. Current. session [ " Blog " ] =   Null ;
}
}
# Endregion

 

The Code on the previous page is actually very simple, that is, first response. write + flush output progress bar and direct response. end, then let it go to the current page through JS, and use the session function to determine whether to display the content or progress bar. To prevent web spider from capturing the progress page rather than the content page, add the judgment on useragent. If it is a spider, skip the progress bar and directly display the content.

The call code is as follows:

 

If ( ! Ispostback)
Initjavascript ();

Current problems: performance is not the best. If you need to jump to a page more than once, the page may not be beautiful enough. You can only use loading to solve the white screen situation, once the response is sent to the browser, the loading is no longer needed (but I don't think this is a problem ).

Effect: http://www.bangso.com/blog/default.aspx? Bun = yeagen