offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

 

图解：

         jquery里的对应取法： clientHeight/Width：innerHeight/Width(), offsetHeight/Width: outerHeight/Width().

         window.innerHeight：窗口高度    window.outerHeight:浏览器高度

         element.getBoundingClientRect(): 可以直接获取top/left/right/bottom/height/width等值，IE7以上都支持

　　　element.offsetTop/offsetLeft: 如果父元素设置了postion(不为static)，则取父元素外边框到本contentHeight中心点的值。如果父元素未设置，层层回溯到HTML外边框。 offsetLeft算法类似。

 

用法

　　  移动端分页懒加载： 判断滚动条到了底部，自动触发下一页加载：监听scroll事件，判断clientHeight-scrollHeight<=0时，启动下一页加载。

       img懒加载：

document.addEventListener('scroll',function(e){ 
  var sid = setTimeout(function(e){
    $('img').each(function(e){
       if(this.dataset['isLazy']) return !0;

       //在视窗且未懒加载过
       if(this.scrollTop > this.offsetTop-window.innerHeight){
          this.src=...;//加载图片
       }else{
          return !1;
       }
    });   
  }, 300);
});