I have found a lot on the Internet, and most of the implementation methods are timer.
I personally think that the timer will create an illusion to a certain extent.
(For example, the timer has not finished page loading, or the page has not been loaded after the timer is finished)
This method uses JavaScript. First, a layer is written into the web page to display the loading box. Then, after the page ends
Write events in the onload of the body to hide the dialog box.
Method (my system has multiple pages, so I wrote a public class common. CS ):
Add the following functions to the class (you can also write them to the file after each code ):
# Region "page loading effect"
/// <Summary>
/// Page loading effect
/// </Summary>
Public static void initjavascript ()
{
Httpcontext. Current. response. Write ("<script language = JavaScript type = text/JavaScript> ");
Httpcontext. Current. response. Write ("Var t_id = setinterval (animate, 20 );");
Httpcontext. Current. response. Write ("Var Pos = 0; var dir = 2; var Len = 0 ;");
Httpcontext. Current. response. Write ("function animate (){");
Httpcontext. Current. response. Write ("Var ELEM = Document. getelementbyid ('progress ');");
Httpcontext. Current. response. Write ("If (ELEM! = NULL ){");
Httpcontext. Current. response. Write ("If (Pos = 0) Len + = dir ;");
Httpcontext. Current. response. Write ("If (LEN> 32 | POS> 79) POS ++ = dir ;");
Httpcontext. Current. response. Write ("If (Pos> 79) len-= dir ;");
Httpcontext. Current. response. Write ("If (Pos> 79 & Len = 0) Pos = 0 ;");
Httpcontext. Current. response. Write ("ELEM. style. Left = Pos ;");
Httpcontext. Current. response. Write ("ELEM. style. width = Len ;");
Httpcontext. Current. response. Write ("}}");
Httpcontext. Current. response. Write ("function remove_loading (){");
Httpcontext. Current. response. Write ("This. clearinterval (t_id );");
Httpcontext. Current. response. Write ("Var targelem = Document. getelementbyid ('loader _ iner ');");
Httpcontext. Current. response. Write ("targelem. style. Display = 'none ';");
Httpcontext. Current. response. Write ("targelem. style. Visibility = 'ddn ';");
Httpcontext. Current. response. Write ("}");
Httpcontext. Current. response. Write ("</SCRIPT> ");
Httpcontext. Current. response. Write ("<style> ");
Httpcontext. Current. response. Write ("# loader_container {text-align: center; position: absolute; top: 40%; width: 100%; left: 0 ;}");
Httpcontext. Current. response. Write ("# 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 ;}");
Httpcontext. Current. response. Write ("# progress {Height: 5px;
Font-size: 1px; width: 1px; position: relative; top: 1px; left: 0px;
Background-color: #8894a8 ;}");
Httpcontext. Current. response. Write ("# loader_bg
{Background-color: # e4e7eb; position: relative; top: 8px; left: 8px;
Height: 7px; width: 113px; font-size: 1px ;}");
Httpcontext. Current. response. Write ("</style> ");
Httpcontext. Current. response. Write ("<Div id = loader_container> ");
Httpcontext. Current. response. Write ("<Div id = loader> ");
Httpcontext. Current. response. Write ("<Div align = center> loading page... </div> ");
Httpcontext. Current. response. Write ("<Div id = loader_bg> <Div id = progress> </div> ");
Httpcontext. Current. response. Write ("</div> ");
Httpcontext. Current. response. Flush ();
}
# Endregion
}
Then, call this method at page_load () Time on the page to be called:
Common. initjavascript ();
Call the event to hide the DIV after the page body is loaded.
<Body onload = "remove_loading ();">
Finished!