asp.net 頁面逐步呈現(xiàn)的方法總結(jié)
更新時(shí)間：2010年06月23日 12:26:34 作者：
分塊編碼 ( chunked encoding )就是讓 response 分塊編碼進(jìn)行傳輸。response 分塊編碼，可以先傳輸一部分不需要處理的 html 代碼到客戶端，等其他耗時(shí)代碼執(zhí)行完畢后再傳輸另外的 html 代碼。
詳細(xì)介紹，請(qǐng)參考：flush 讓頁面分塊,逐步呈現(xiàn)
假設(shè)有一個(gè)頁面，一開始顯示 cnblogs 的 logo 圖標(biāo)，3 秒鐘后顯示 csdn 的 logo 圖標(biāo)。
我根據(jù)上文介紹，用 asp.net 實(shí)現(xiàn)了上述功能。
ASP.NET 代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="flush讓頁面分塊逐步呈現(xiàn).aspx.cs" Inherits="Web_1.flush讓頁面分塊逐步呈現(xiàn)" %>
<!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讓頁面分塊逐步呈現(xiàn)</title>
</head>
<body>
<div id="head" style="border:1px solid #ccc;">
cnblogs logo <img src="http://images.cnblogs.com/logo_small.gif" alt=""/>
</div>
<%
// flush分塊輸出
Response.BufferOutput = false;
Response.Flush();
// Response.Output.Flush();
%>
<br /> 3 秒后加載下面內(nèi)容...
<div id="content" style="border:1px solid blue;">
<%
// 睡眠3秒
System.Threading.Thread.Sleep(3000);
%>
csdn logo <img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" alt=""/>
</div>
</body>
</html>
如果想實(shí)現(xiàn) tudou.com 首頁圖片延遲加載的效果，則可以使用 jquery 輕松實(shí)現(xiàn)。
詳細(xì)介紹，請(qǐng)參考：名站技術(shù)分析 - 淺談 tudou.com 首頁圖片延遲加載的效果
JQuery 代碼如下：
<!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>
一開始能看到的圖片：
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
<div id="lazyBox" style="margin-top:100px;">
一開始看不到下面的圖片，滾動(dòng)鼠標(biāo)后可以看見：
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
</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){
// 滾動(dòng)高度超過50，加載圖片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
假設(shè)有一個(gè)頁面，一開始顯示 cnblogs 的 logo 圖標(biāo)，3 秒鐘后顯示 csdn 的 logo 圖標(biāo)。
我根據(jù)上文介紹，用 asp.net 實(shí)現(xiàn)了上述功能。
ASP.NET 代碼如下：
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="flush讓頁面分塊逐步呈現(xiàn).aspx.cs" Inherits="Web_1.flush讓頁面分塊逐步呈現(xiàn)" %>
<!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讓頁面分塊逐步呈現(xiàn)</title>
</head>
<body>
<div id="head" style="border:1px solid #ccc;">
cnblogs logo <img src="http://images.cnblogs.com/logo_small.gif" alt=""/>
</div>
<%
// flush分塊輸出
Response.BufferOutput = false;
Response.Flush();
// Response.Output.Flush();
%>
<br /> 3 秒后加載下面內(nèi)容...
<div id="content" style="border:1px solid blue;">
<%
// 睡眠3秒
System.Threading.Thread.Sleep(3000);
%>
csdn logo <img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" alt=""/>
</div>
</body>
</html>
如果想實(shí)現(xiàn) tudou.com 首頁圖片延遲加載的效果，則可以使用 jquery 輕松實(shí)現(xiàn)。
詳細(xì)介紹，請(qǐng)參考：名站技術(shù)分析 - 淺談 tudou.com 首頁圖片延遲加載的效果
JQuery 代碼如下：
復(fù)制代碼 代碼如下:
<!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>
一開始能看到的圖片：
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
<div id="lazyBox" style="margin-top:100px;">
一開始看不到下面的圖片，滾動(dòng)鼠標(biāo)后可以看見：
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
</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){
// 滾動(dòng)高度超過50，加載圖片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
您可能感興趣的文章:
- asp.net Server.MapPath方法注意事項(xiàng)
- 充分利用ASP.NET的三種緩存提高站點(diǎn)性能的注意方法
- 調(diào)試ASP.NET應(yīng)用程序的方法和技巧
- ASP.NET技巧：數(shù)據(jù)島出到Excel最為簡易的方法
- .net與javascript腳本的交互方法總結(jié)
- ASP.NET過濾HTML字符串方法總結(jié)
- Asp.net禁用頁面緩存的方法總結(jié)
- Asp.Net alert彈出提示信息的幾種方法總結(jié)
- asp.net刷新本頁面的六種方法總結(jié)
- asp.net中幾種常用的身份驗(yàn)證方法總結(jié)
- ASP.NET 頁面?zhèn)髦党Ｓ梅椒偨Y(jié)
- .NET中方法的注意事項(xiàng)總結(jié)
相關(guān)文章
ASP.NET項(xiàng)目開發(fā)中日期控件DatePicker如何使用
這篇文章主要為大家詳細(xì)介紹了ASP.NET項(xiàng)目開發(fā)中日期控件DatePicker的使用方法，感興趣的小伙伴們可以參考一下2016-04-04
.NET微服務(wù)架構(gòu)CI/CD自動(dòng)打包鏡像
這篇文章介紹了.NET使用微服務(wù)架構(gòu)CI/CD自動(dòng)打包鏡像的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
asp.net遍歷文件夾下所有子文件夾并綁定到gridview上的方法
這篇文章主要介紹了asp.net遍歷文件夾下所有子文件夾并且遍歷配置文件某一節(jié)點(diǎn)中所有key,value并且綁定到GridView上,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了ASP.NET Core項(xiàng)目配置教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
在AspNetCore中使用極驗(yàn)做行為認(rèn)證的驗(yàn)證流程
這篇文章主要介紹了在AspNetCore中使用極驗(yàn)做行為認(rèn)證的驗(yàn)證流程 ,本文有圖文介紹有實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了揭秘.NET?Core剪裁器背后的技術(shù),很多朋友對(duì)于這個(gè)開源項(xiàng)目的原理很感興趣，因此我將通過這篇文章為大家介紹它的工作原理，需要的朋友可以參考下2022-03-03
輕量級(jí)ORM框架Dapper應(yīng)用支持操作函數(shù)和事物
這篇文章介紹了Dapper支持操作函數(shù)和事物的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
為ASP.NET Core強(qiáng)類型配置對(duì)象添加驗(yàn)證的方法
這篇文章主要給大家介紹了關(guān)于如何為ASP.NET Core強(qiáng)類型配置對(duì)象添加驗(yàn)證的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
做過很多的Web項(xiàng)目，大多數(shù)在打印頁面內(nèi)容的時(shí)候，采用的都是通過Javascript調(diào)用系統(tǒng)內(nèi)置的打印方法進(jìn)行打印，也就是調(diào)用 PrintControl.ExecWB(?,?)實(shí)現(xiàn)直接打印和打印預(yù)覽功能。2010-01-01
在asp.net core中使用類似Application的服務(wù)的實(shí)現(xiàn)
這篇文章主要介紹了在asp.net core中使用類似Application的服務(wù)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02