名站技术分析 — 浅谈tudou.com首页图片延迟加载的效果
来源:互联网 发布:网络金融销售 编辑:程序博客网 时间:2024/04/30 11:54
实现:
其实tudou的实现原理很简单,
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码:
<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
</a>
2. 绑定window.scroll事件,在该事件里面的重设所有class为lazyImg的图片的src值,在土豆首页找到如下JS:
var o=function(){
var s=TUI.pos.scrollTop(),q=c;
if(q.box[0]){
var r=q.box.offset().top;
if(r-s>0&&r-TUI.pos.windowHeight()<s){
q.init()
}else{
q.stop()
}
}
if(!h||s<590){return true}
TUI.widget.quickPlaylist.load();
h=false
};
o();
$(window).bind("scroll",o);
我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。
实例:
上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
<!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/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
<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>
把上面代码copy到本地运行下就可以看到效果了。
- 名站技术分析 — 浅谈tudou.com首页图片延迟加载的效果
- 名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果
- 土豆首页图片延迟加载的效果
- jQuery图片延迟加载技术的应用(砌墙效果)
- 图片延迟加载技术
- 图片延迟加载技术
- 图片延迟加载技术-Lazyload的应用
- 图片延迟加载技术-Lazyload的应用
- ImagesLazyLoad 图片延迟加载效果
- ImagesLazyLoad 图片延迟加载效果
- ImagesLazyLoad 图片延迟加载效果
- ImagesLazyLoad 图片延迟加载效果
- ImagesLazyload图片延迟加载效果
- 淘宝首页图片加载技术
- 名站技术分析 — facebook奇特的页面加载技术
- 名站技术分析 — facebook奇特的页面加载技术
- 名站技术分析 — facebook奇特的页面加载技术
- 图片的延迟加载
- merge与update区别---->你一定要看!
- SQL SERVER MaintanencePlan 失败 无法解密受保护的 XML 节点“DTS:Password”,错误为 0x8009000B解决
- Joomlart T3 framework Insight & Gavick Pro Template
- C++ 单链表
- JAVA中线程同步方法
- 名站技术分析 — 浅谈tudou.com首页图片延迟加载的效果
- 定时器SetTimer之解析---VC新手
- IDR(刷新帧)与I帧的一些知识点
- Netfilter框架的设计与实现
- C语言实现的Web服务器
- struts-config.xml常用配置详解(转)
- 关于一维数组和二维数组
- 2011年软考系统架构设计师学习笔记第四章
- Objective-C 2.0 with Cocoa Foundation--- Class类型,选择器Selector以及函数指针(1)