欢迎各位兄弟 发布技术文章
这里的技术是共享的
实现原理很简单,
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);
来自 http://wyong48.blog.163.com/blog/static/2833106520110132556423/