day-029-twenty-nine-20230317-js盒子模型-getBoundingClientRect-图片懒加载

js盒子模型

• JavaScript盒子模型的13个属性

  • offsetParent: 当前DOM元素中设置了定位的最近直系祖先级DOM元素

    • 或者最近的table元素,最近的td元素,最近的th元素,最近的body元素。
    • offsetParent不一定是当前DOM元素的父元素
    • offsetParent的根元素是body元素
    • body元素的offsetParent是null，而不是document.documentElement

  • offsetTop: 当前DOM元素距离最近直系祖先定位元素的上内边距距离

  • offsetLeft: 当前DOM元素距离最近直系祖先定位元素的左内边距距离

    • 得到当前DOM元素到文档顶端的高度

  • clientTop: 当前DOM元素的上边框宽度

  • clientLeft: 当前DOM元素的左边框宽度

    • 拿到当前元素到body的上边框的高度

      • 以及当前元素到body的左边框的宽度

  • offsetWidth: 内容宽度content+左内边距宽度padding-left+右内边距宽度padding-right+左边框宽度border-left+右边框宽度border-right

    • 标签盒模型: 内容宽度content=width
    • IE怪异盒模型: 内容宽度content=width -: 左内边距宽度padding-left -: 右内边距宽度padding-right

  • offsetHeight: 内容高度contentHeight+上内边距宽度padding-top+下内边距宽度padding-bottom+上边框宽度border-top+下边框宽度border-bottom

  • clientWidth 内容content宽度+左右padding-纵向滚动条占用的宽度

    • 不同浏览器滚动条宽度不太一样

  • clientHeight 内容content高度+上下padding-横向滚动条占用的高度

  • scrollWidth 当前DOM元素的滚动条总宽度

    • 如果滚动内容未超出盒子，scrollWidth=clientWidth
    • 如果滚动内容超出盒子，实际内容就是多少scrollWidth就是多少

  • scrollHeight 当前DOM元素的滚动条总高度

    
    
    
    
    #box{height:200px;width:100px;background-color:coral;margin:100px;padding:20px;border:10px solid red;overflow: auto;}
    
    
    

  • scrollTop 滚动条滚动过去的上下距离

    • 文档的已滚动高度
      • (document.documentElement||document.body).scrollTop
        • 一般浏览器用document.documentElement，页面滚动条就在它里面
          • IE可能用document.body，IE没document.documentElement
        • 一般浏览器也有document.body，但页面滚动条不在它里面
        • document.documentElement要放前面

  • scrollLeft 滚动条滚动过去的左右距离

    
    
    
    
    返回顶部
    
    
    

• 对象中，key和value一致，可以省略一个

  • 即键值对中属性名与作为属性值的变量名一致，那么可以省略为一个

• getBoundingClientRect()

  • 当前DOM元素与可视窗口的信息
    • ES6新增
  • 返回值DOMRect{}对象
    • .getBoundingClientRect().x
      • 值可以是负数
    • .getBoundingClientRect().y
    • .getBoundingClientRect().width
    • .getBoundingClientRect().height
    • .getBoundingClientRect().top：元素上边到视窗上边的距离;
    • .getBoundingClientRect().right：元素右边到视窗左边的距离;
    • .getBoundingClientRect().bottom：元素下边到视窗上边的距离;
    • .getBoundingClientRect().left：元素左边到视窗左边的距离
  • 数值之间的关系
    • DOM元素对象.getBoundingClientRect().right===DOM元素对象.getBoundingClientRect().left+DOM元素对象.getBoundingClientRect().width //true
    • DOM元素对象.getBoundingClientRect().bottom===DOM元素对象.getBoundingClientRect().top+DOM元素对象.getBoundingClientRect().height //true
    • DOM元素对象.getBoundingClientRect().top===DOM元素对象.getBoundingClientRect().y //true
    • DOM元素对象.getBoundingClientRect().left===DOM元素对象.getBoundingClientRect().x //true

• 滚动事件

  • 页面目标对象 window、document
  • window.onscroll

• 获取样式

  • DOM元素对象.style.xxx
    • 通过DOM元素对象.style.xxx只能获取行内样式
  • window.getComputedStyle(DOM元素对象)

    • 获取元素的任何形式的计算后的样式，返回一个CSSStyleDeclaration对象

    • 中括号语法的适用范围要比点语法更广

      • 中括号语法中的属性名可以用驼峰命名法，也能使用-连接符命名式
      • 点语法一般只能用驼峰命名法来访问对象成员
      • 方法封装中，一般能用中括号语法，就不要使用点语法

      
      12345
      
      

• 设置样式

  • 使用DOM元素的style属性，直接设置元素的内联样式

    const element = document.getElementById('my-element');
    element.style.color = 'red';
    

  • 使用DOM元素的classList属性，通过添加/移除类名的方式来设置样式

    
    555
    
    
    

  • 使用setAttribute()方法，通过设置元素的style属性来添加CSS样式

    const element = document.getElementById('my-element');
    element.setAttribute('style', 'color: red; font-size: 16px;');
    

  • 动态创建一个style元素，将CSS样式插入到其中

    const style = document.createElement('style');
    style.innerHTML = `#my-element {color: red;font-size: 16px;}
    `;
    document.head.appendChild(style);
    

• 封装获取样式方法

  // 封装获取样式
  function getCss(element, styleName) {return window.getComputedStyle(element)[styleName];
  }
  console.log(getCss(document.body, "background-color"));
  

• 封装设置样式

  //封装设置样式
  const setCss = function setCss(element, styleObject) {for (let key in styleObject) {element.style[key] = styleObject[key];}
  };
  let obj = {fontSize: "50px",border: "10px solid red",borderRadius: "50%",
  };
  setCss(document.body, obj);
  

图片懒加载

• 总体思路

  1. 不立刻给src赋值，到达某个条件后再加载。
     • 因为只是给图片标签的src属性赋值，图片就会立即加载，占用带宽。
  2. 先设置一个自定义属性如data-src存储真实的图片地址
  3. 设置一个父级盒子给图片占位置，父级盒子设置背景颜色或图片，未来存放图片
  4. 隐藏裂掉的图片 img[src=""]{ display: none; }
  5. 时机到了之后，将自定义属data-src的属性值赋值给src
     • 时机举例

       • 页面内容都加载完毕后，最后加载图片—window.onload事件

         console.log(document.querySelector('body'))
         window.onload=function(){console.log(document.querySelector('body'))
         }
         

       • 点击图片所在格子后加载

  
  h1标签
  
  

• 升级图片懒加载

  • 如果data-src的图片路径是错误的，后面不再执行。
  • 判断图片路径是对的
    • 先创建一个新的img元素对象，利用新的img元素对象的src属性进行测试，之后利用img元素对象的onload事件。
      • 图片的onload事件，图片路径正确并请求完图片才会执行。
  • 判断图片路径是图片路径错误的

    • 先创建一个新的img元素对象，利用新的img元素对象的src属性进行测试，之后利用img元素对象的onerror事件。

      let newImage = document.createElement('img')
      // 图片的onload事件，图片路径正确并请求完图片才会执行。
      newImage.onload=()=>{console.log('图片路径正确')
      }
      newImage.onerror=()=>{console.log('图片路径错误')
      } 
      newImage.src = '//www.baidu.com/img/flexible/logo/pc/result@2.png'
      

      let newImage = document.createElement('img')
      newImage.onload=function(){console.log('图片路径正确')newImage=null
      }
      newImage.onerror=function(e,e1){console.log('图片路径错误',e,this,e1,newImage.src)//可以在这把图片的路径报告给后端newImage=null} 
      newImage.src = '//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png1'
      

• 升级图片懒加载

  • 视口底部超过当前元素后再懒加载

进阶参考