For more information, please refer to: Flush let the page block, gradually rendered
Assume that there is a page, the first display Cnblogs logo icon, 3 seconds after the display of CSDN logo icon.
Based on the above, I have implemented the above functions with asp.net.
The ASP.net code is as follows:
Copy Code code as follows:
<%@ page language= "C #" autoeventwireup= "true" codebehind= "flush lets pages be progressively rendered. Aspx.cs" inherits= "Web_1.flush make the page block-by-step rendering "%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>flush lets page blocks progressively render </title>
<body>
<div id= "Head" style= "border:1px solid #ccc;" >
Cnblogs logo
</div>
<%
Flush-Block output
Response.bufferoutput = false;
Response.Flush ();
Response.Output.Flush ();
%>
<br/> 3 seconds to load the following content ...
<div id= "Content" style= "border:1px solid blue;" >
<%
Sleep 3 seconds
System.Threading.Thread.Sleep (3000);
%>
CSDN logo
</div>
</body>
If you want to achieve the Tudou.com home page picture delay loading effect, you can use jquery easy to implement.
Detailed introduction, please refer to: Technical analysis of the name station-talking about tudou.com home page picture delay loading effect
The JQuery code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
The first picture to see:
<div id= "Lazybox" style= "margin-top:100px;" >
The following picture is not visible at first, and can be seen after scrolling 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) {
Scroll height over 50, load picture
Hasshow = true;
$ ("#lazyBox. lazyimg"). each (function () {
$ (this). attr ("src", $ (this). attr ("alt"));
});
}
});
</script>
</body>
