For more information, see flush to split pages and present them gradually.
Suppose there is a page where the cnblogs logo icon is displayed at the beginning, and the csdn logo icon is displayed three seconds later.
Based on the above introduction, I have implemented the above functions using asp.net.
The ASP. NET code is as follows:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "flush to gradually present Page blocks. aspx. cs "Inherits =" Web_1.flush to gradually display page blocks "%>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> flush to gradually display page blocks </title>
</Head>
<Body>
<Div id = "head" style = "border: 1px solid # ccc;">
Cnblogs logo
</Div>
<%
// Flush multipart output
Response. BufferOutput = false;
Response. Flush ();
// Response. Output. Flush ();
%>
<Br/> load the following content in 3 seconds...
<Div id = "content" style = "border: 1px solid blue;">
<%
// Sleep for 3 seconds
System. Threading. Thread. Sleep (3000 );
%>
Csdn logo
</Div>
</Body>
</Html>
If you want to implement the effect of delayed loading of tudou.com homepage images, you can use jquery.
For details, refer to: technical analysis of the namesite-Introduction to the effect of tudou.com homepage image loading Delay
The JQuery code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
</Head>
<Body>
Images that can be viewed at the beginning:
<Div id = "lazyBox" style = "margin-top: 100px;">
You cannot see the following picture at first, and you can see it after you scroll the mouse:
</Div>
<Div style = "height: 1000px;"> </div>
<Script type = "text/javascript">
Var hasShow = false;
$ (Window). bind ("scroll", function (){
If (hasShow = true ){
$ (Window). unbind ("scroll ");
Return;
}
Var t = $ (document). scrollTop ();
If (t> 50 ){
// The scroll height exceeds 50 and the image is loaded.
HasShow = true;
$ ("# LazyBox. lazyImg"). each (function (){
$ (This). attr ("src", $ (this). attr ("alt "));
});
}
});
</Script>
</Body>
</Html>
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
