zoukankan      html  css  js  c++  java
  • 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);
    });

            

      

  • 相关阅读:
    Java自学
    Java自学
    Java自学
    java自学
    Java自学
    mybatis基础及原理
    自定义swagger maven codegen插件
    spring学习总结016 --- spring事务原理
    spring学习总结015 --- spring事务
    windows解决端口占用问题
  • 原文地址:https://www.cnblogs.com/mominger/p/3824579.html
Copyright © 2011-2022 走看看