欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

js 延迟加载原理

shiping1 的头像

实现原理很简单,

 

   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/

普通分类: