经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,而是当用户拖动滚动条到了"娱乐" 这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
其实tudou的实现原理很简单:
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接地址放到图片的alt属性中,看下tudou的代码:
<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);
上面代码不能直接运行,但分析这些代码,我们可以了解tudou实现图片延迟加载的原理,然后来实现它。
模拟实现代码如下:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
默认显示的图片:
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
不显示的图片:
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<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>100){
// 滚动高度超过100px,加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
其实tudou的实现原理很简单:
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接地址放到图片的alt属性中,看下tudou的代码:
<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);
上面代码不能直接运行,但分析这些代码,我们可以了解tudou实现图片延迟加载的原理,然后来实现它。
模拟实现代码如下:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
默认显示的图片:
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
不显示的图片:
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<img width="120" height="90" style="border:1px solid red" class="lazyImg" alt="真实图片.jpg" src="空白图片.gif" />
<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>100){
// 滚动高度超过100px,加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>