欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浅谈tudou土豆网首页图片延迟加载的效果_javascript技巧

程序员文章站 2022-04-30 10:39:29
...
这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
实现:
其实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()q.init()
}else{
q.stop()
}
}
if(!h||sTUI.widget.quickPlaylist.load();
h=false
};
o();
$(window).bind("scroll",o);

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。
实例:
上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
复制代码 代码如下:








能看的见到图片:浅谈tudou土豆网首页图片延迟加载的效果_javascript技巧


一开始看不到的图片:
浅谈tudou土豆网首页图片延迟加载的效果_javascript技巧
浅谈tudou土豆网首页图片延迟加载的效果_javascript技巧








把上面代码copy到本地运行下就可以看到效果了。
相关标签: 图片延迟加载