The prompt "loading..." appears during webpage loading ...", In particular, when using the animation effect, you can give a "wait" reminder, and the user experience is very good.
I spent more than half an hour checking the implementation method of loading the page online, and I think it is necessary to record it.
First, the simplest one. The principle is that when a webpage is loaded, a layer is displayed at the center of the page. "The webpage is loading .... "When the web page is downloaded, use js to close this layer .......
First, you can add any location on the top of the homepage HTML...
<Div id = loading style = "position: absolute; left: 423px; top: 261px; width: 227px; Height: 20px; Z-index: 1">
Loading... please wait </div>
<Script language = JavaScript>
Function closediv ()
{
Document. getelementbyid ('loading'). style. Visibility = 'hiddy ';
}
</SCRIPT>
Then add
<Script language = "JavaScript">
<! --
Closediv ()
// -->
This is simple and clear, but the effect may not be very accurate.
Second, false or false
It is to add a set of "|" strings consecutively by using a percentage, and then execute a self. Location. href jump after reaching 100%.
The following is the implementation code:
<Html>
<Head>
<Title> loading... </title>
<Meta http-equiv = "Content-Type" c>
</Head>
<Body bgcolor = "# FFFFFF" leftmargin = "0" topmargin = "0">
<Table border = 0 cellpadding = 0 cellspacing = 0 width = "100%" height = "100%">
<Tr>
<Form name = loading>
<Td align = center>
<P> <font color = gray> loading the homepage. Please wait... </font> </p>
<P>
<Input type = text name = chart size = 46 style = "font-family: Arial;
Font-weight: bolder; color: gray;
Background-color: white; padding: 0px; border-style: none; ">
<Br>
<Input type = text name = percent size = 46 style = "font-family: Arial;
Color: gray; text-align: center;
Border-width: Medium; border-style: none; ">
<SCRIPT> var bar = 0
VaR line = "|"
VaR amount = "|"
Count ()
Function count (){
Bar = BAR + 2
Amount = Amount + LINE
Document. Loading. Chart. value = Amount
Document. Loading. percent. value = BAR + "%"
If (Bar <99)
{SetTimeout ("count ()", 100 );}
Else
{Window. Location = "http://www.XXXX.com /";}
}
</SCRIPT>
</P>
</TD>
</Form>
</Tr>
</Table>
</Body>
</Html>
However, this method redirects to the past to read the page again, and this effect does not provide any pre-loading function. It can only be said to be false or false.
Third: Use the document. all of the DOM model to document. layers to determine whether the page is loaded, so as to realize the reality and hiding of the layer. Document. all and document. layers.
Document. all is an object set of IE browser. Generally, if (document. all) is used to determine whether it is an IE browser. This set represents all elements under the document object;
Document. layers is a collection of objects in the Netscape browser. This collection represents all layers under the document object ).
The following is the implementation code:
<Html>
<Head>
<Title> Loading... </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Script language = "JavaScript">
<! --
Var url = 'HTTP: // www.XXXX.com ';
// -->
</Script>
</Head>
<Body scroll = "no" bgcolor = "# FFFFFF" onLoad = "location. href = url">
<Div align = "center">
<Br>
<P> <font face = "Verdana, Arial, Helvetica, sans-serif" size = "2" color = "# FF6600"> loading XXXX .... </font>
</P>
<P>
<Script>
<! --
If (document. layers)
Document. write ('<Layer src = "' + url + '" VISIBILITY = "hide"> </Layer> ');
Else if (document. all | document. getElementById)
Document. write ('<iframe src = "' + url + '" style = "visibility: hidden;"> </iframe> ');
Else location. href = url;
// -->
</Script>
</P>
</Div>
</Body>
</Html>
The fourth type is window. onload, which is executed only after the page is fully read.
First, design a layer with the ID of LoadingBar on the HTML page where you want to use the load entry (the style of this layer can be set at will, and images can be added to it. In short, as long as the ID meets the conditions, other items can be casually
Javascipt code:
Function initPage ()
{
Var objLoading = document. getElementById ("LoadingBar ");
If (objLoading! = Null)
{
ObjLoading. style. display = "none ";
}
}
Html code: <div id = "LoadingBar"> loading... please wait ...... </Div>
This statement should be placed at the front of the page, that is, followed by the line below the <body> label, so as to ensure that this layer is first displayed when reading the page. Finally, add a JavaScript in the header: window. onload = initPage ();
InitPage is actually the first initPage () function that I don't describe to. It is actually a process to close the LoadingBar layer.
The last one is simple and easy to understand.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
