土豆首页图片延迟加载的效果

最新推荐文章于 2025-08-16 15:21:57 发布

转载最新推荐文章于 2025-08-16 15:21:57 发布 · 1.7k 阅读

文章标签：

#scroll #border #class #function #xhtml #娱乐

前端开发专栏收录该内容

36 篇文章

订阅专栏

本文详细解读了土豆网首页图片延迟加载的实现原理，包括使用sprite.gif图集和JavaScript事件绑定，以及如何通过滚动事件优化图片加载，减少服务器压力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常上tudou网，发现tudou首页加载图片的功能很有意思，tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了"娱乐"这个板块，才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。

实现:

其实tudou的实现原理很简单，

1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif)，把真真图片的连接放进图片的alt属性中，look下代码：

</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" /> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></mce:script> </head> <body> 能看的见到图片：<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg" mce_src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/> <div id="lazyBox" style="margin-top:100px;" mce_style="margin-top:100px;"> 一开始看不到的图片： <img width="120" height="90" style="border:1px solid blue;" mce_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" mce_src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA" mce_coords="_DAA"/> <img width="120" height="90" style="border:1px solid blue;" mce_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" mce_src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA" mce_coords="_DBA"/> </div> <div style="height:1000px;"> </div> <mce:script type="text/javascript"></mce:script> </body> </html>