您的位置：首页 > 其它

关于页面逐步呈现的总结

2010-06-22 15:24 197 查看

分块编码 ( chunked encoding )

就是让 response 分块编码进行传输。response 分块编码，可以先传输一部分不需要处理的 html 代码到客户端，等其他耗时代码执行完毕后再传输另外的 html 代码。

详细介绍，请参考：高性能 WEB 开发(11) - flush 让页面分块,逐步呈现

假设有一个页面，一开始显示 cnblogs 的 logo 图标，3 秒钟后显示 csdn 的 logo 图标。

我根据上文介绍，用 asp.net 实现了上述功能。

ASP.NET 代码如下：

JQuery实现图片延迟加载的效果.html

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

相关阅读：

高性能WEB开发(11) - flush 让页面分块,逐步呈现

名站技术分析 - 浅谈 tudou.com 首页图片延迟加载的效果

名站技术分析 — facebook 奇特的页面加载技术

让 ajax 更加友好，实时显示后台处理进度

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航