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

2021年1月13日   |   by tgcode

  经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从”娱乐”tgcode这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,

  而是当用户拖动滚动条到了”娱乐”这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,

  这对减少服务器的压力还是很有帮助的。

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

  实现:

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

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

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()

  我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。

  实例:

  上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。




tgcode
	
	 


	能看的见到图片:%title插图%num
	
	
一开tgcode始看不到的图片: %title插图%num %title插图%num
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")); }); } });

  把上面代码copy到本地运行下就可以看到效果了。

相关推荐: 前端开发与项目管理

  项目管tgcode理,这是一个很专业的领域,涉及的内容非常广泛,并且实践操作过程是“多变”的,第一次接触这个工作是在之前公司做广东省电信IPTV-EPG项目的时候,这也是第一次帮带团队,这也是偏技术方面的,涉及的内容很少;主要是团队召集、带领团队解决局方问…

Tags: , , ,