总结asp.net 页面逐步呈现的方法

2019-09-02 09:47:14来源：爱站网阅读 ()

在传统的ASP中，我们可以使用post方法轻松地在页面之间传输变量，在ASP.NET中使用事件驱动的编程模型更麻烦，别着急，今天爱站技术频道为大家总结asp.net 页面逐步呈现的方法，一起来了解一下吧！
我根据上文介绍，用 asp.net 实现了上述功能。
ASP.NET 代码如下：

复制代码代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="flush让页面分块逐步呈现.aspx.cs" Inherits="Web_1.flush让页面分块逐步呈现" %>

<!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让页面分块逐步呈现</title>

</head>

<body>

<div id="head" style="border:1px solid #ccc;">

cnblogs logo <img src="/info/upimg/allimg/190902/0949393W4-0.gif" alt=""/>

</div>

<%

// flush分块输出

Response.BufferOutput = false;

Response.Flush();

// Response.Output.Flush();

%>

<br /> 3 秒后加载下面内容...

<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>

如果想实现 tudou.com 首页图片延迟加载的效果，则可以使用 jquery 轻松实现。
详细介绍，请参考：名站技术分析 - 浅谈 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;">

一开始看不到下面的图片，滚动鼠标后可以看见：

<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){

// 滚动高度超过50，加载图片

hasShow = true;

$("#lazyBox .lazyImg").each(function(){

$(this).attr("src",$(this).attr("alt"));

});

}

});

</script>

</body>

</html>