asp.net 页面逐步呈现的方法总结_实用技巧

详细介绍,请参考:flush 让页面分块,逐步呈现
假设有一个页面,一开始显示 cnblogs 的 logo 图标,3 秒钟后显示 csdn 的 logo 图标。

我根据上文介绍,用 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="http://images.cnblogs.com/logo_small.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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/tylc-115X55.jpg/>
<div id="lazyBox" style="margin-top:100px;">
一开始看不到下面的图片,滚动鼠标后可以看见:
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="yun_qi_img/m20.jpg" src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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>

时间: 2024-12-31 06:40:05

asp.net 页面逐步呈现的方法总结_实用技巧的相关文章

ASP.NET 页面间数据传递方法小结_实用技巧

0.引言 Web 页面是无状态的,服务器对每一次请求都认为来自不同用户,因此,变量的状态在连续对同一页面的多次请求之间或在页面跳转时不会被保留.在用Asp.NET 设计开发一个Web系统时, 遇到一个重要的问题是如何保证数据在页面间进行正确.安全和高效地传送,Asp.net 提供了状态管理等多种技术来解决保存和传递数据问题,以下来探讨.NET 下的解决此问题的各种方法和各自的适用场合. 1.数据传递的各种方法和分析 1.1 使用Querystring 方法 QueryString 也叫查询字符串

asp.net跳转页面的三种方法比较_实用技巧

1. response.redirect 这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但他可以跳 转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护. 但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session. 2. server.transfer 速度快,只需要一次pos

ASP.net中网站访问量统计方法代码_实用技巧

一.建立一个数据表IPStat用于存放用户信息 我在IPStat表中存放的用户信息只包括登录用户的IP(IP_Address),IP来源(IP_Src)和登录时间(IP_DateTime),些表的信息本人只保存一天的信息,如果要统计每个月的信息则要保存一个月.因为我不太懂对数据日志的操作,所以创建此表,所以说我笨吧,哈哈. 二.在Global.asax中获取用户信息 在Global.asax的Session_Start即新会话启用时获取有关的信息,同时在这里实现在线人数.访问总人数的增量统计,代

ASP.NET编程获取网站根目录方法小结_实用技巧

本文实例讲述了ASP.NET编程获取网站根目录方法.分享给大家供大家参考,具体如下: 获取网站根目录的方法有几种如: Server.MapPath(Request.ServerVariables["PATH_INFO"]) Server.MapPath("/") Server.MapPath("")//当前代码文件所在的目录路劲 Server.MapPath(".") Server.MapPath("../"

ASP.NET中实现获取调用方法名_实用技巧

本文实例讲述了ASP.NET中实现获取调用方法名的技巧.分享给大家供大家参考.具体实现方法如下: 在写记录日志功能时,需要记录日志调用方所在的模块名.命名空间名.类名以及方法名,想到使用的是反射(涉及到反射请注意性能),但具体是哪一块儿还不了解,于是搜索,整理如下:   需要添加相应的命名空间: 复制代码 代码如下: using System; using System.Diagnostics; using System.Reflection; 如果仅是获取当前方法名,可以使用如下代码: 复制代

asp.net页面中时间格式化的示例_实用技巧

asp.net页面将Eval中的时间显示为"yyyy-MM-dd"格式 复制代码 代码如下: <table>  <tr>    <td style="width:273px;color:#105db5;" valign="top">[**平台]  <a href="javascript:void(0)" style="color:#6c6c72" title='&l

ASP.NET连接数据库并获取数据方法总结_实用技巧

本文实例讲述了ASP.NET连接数据库并获取数据方法.分享给大家供大家参考,具体如下: *连接对象的用法SqlConnection,SqlCommand,SqlDataAdapter *数据访问方式的写法 1.获取数据: //引用这两个命名空间 using System.Data.SqlClient; using System.Data; // 初始化连接对象 SqlConnection conn = new SqlConnection(); conn.ConnectionString = "U

asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输_实用技巧

具体我们如何实现文件的异步刷新,目前网上已经有了很多文章来解决这个问题,但是会用到大量的javascript,由于本人编码功力尚浅,所以之今没有高清其中的所以然,但是在解决的方案中他们貌似都用到了iframe,这让我茅塞顿开,所以我就说说用这个处理刷新的思路. 首先一个实际的页面中往往是会有较多的内容,我们暂时把它分为A,B两个区域,A区域是内容区域,我们可以用updatepanel来实现异步刷新,B区域是上传区域,我们用div已经ifame占位,其中上传的具体功能实现我们可以放到C页面中,这样

ASP.NET操作各类时间段获取方法汇总_实用技巧

本文实例讲述了ASP.NET操作各类时间段获取方法,分享给大家供大家参考.具体如下: 复制代码 代码如下: DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(1- Convert.ToInt32(dt.DayOfWeek.ToString("d"))); //本周周一 DateTime endWeek = startWeek.AddDays(6); //本周周日 DateTime startMonth