开头

作为最常见的优化页面的一种手段，记录一下学习笔记

正文

什么是懒加载

• 也叫延迟加载，即让页面依赖的一些非关键资源，先不加载，在后期达到某些触发条件时，在加载
• 这里的关键资源指决定和影响当前访问页面的一些资源；非关键资源，比如针对页面某一部分的一些脚本、动态切换的样式等

目的

减少资源加载带来的响应时间过长，造成用户体验不好

具体表现

• 在页面滚动到某一部分，加载当前位置需要显示的图片和相关资源
• 面板切换，要切换时，在加载将要显示的资源
• 等等

实现

• 对上述第一种情况进行一个简单的效果实现
• 页面有3部分，每一部分都占满整个屏幕，显示一张图片

思路

• 对一部分的图片不作处理
• 对剩下的2部分的图片的src不先不设置，把资源路径添加到data-src里
• 对整个文档添加一个滚动事件
• 每次滚动事件的函数触发时，获取当前文档滚动的height
• 当滚动的位置达到我们指定的值后，通过js给图片的src添加资源路径

用到的api

• data-***：不具有表现意义的一个属性，用于给dom添加自定的片段数据
• 滚动事件：mousewheel
• 获取文档滚动的高度：scrollTop

代码

<!-- CSS&HTML -->
<style>
  body {
    margin: 0;
    overflow-x: hidden;
  }

  .box > div {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .two,
  .three {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
  }
</style>
<!-- HTML -->
<div class="box" id="box">
  <div class="one">
    <img src="./img/a.jpg" alt="" />
  </div>
  <div class="two">
    <img src="" data-src="./img/b.jpg" alt="" />
  </div>
  <div class="three">
    <img src="" data-src="./img/c.jpg" alt="" />
  </div>
</div>
<script>
  let box = document.querySelector("#box");
  box.addEventListener("mousewheel", () => {
    if (document.documentElement.scrollTop > 10) {
      document.querySelector(".two").style.visibility = "visible";
      document.querySelector(".two").style.opacity = "1";
      document.querySelector(".two img").src = document
        .querySelector(".two img")
        .getAttribute("data-src");
    }
    if (document.documentElement.scrollTop > 722) {
      document.querySelector(".three").style.visibility = "visible";
      document.querySelector(".three").style.opacity = "1";
      document.querySelector(".three img").src = document
        .querySelector(".three img")
        .getAttribute("data-src");
    }
  });
</script>

• 打开chrome调试工具，查看network，发现页面一开始只加载了a图片
• 当滚动到指定位置后，才开始加载需要后面的资源

关于获取dom的大小、位置

提到了scrollTop，顺带总结一下这几个api的区别

clientHeight、clientWidth

• 获取dom的height（width）+padding（如果没设置，为0）
• 这里还有一个同样功能的api：getClientRects
• 两者的区别：前者对小数取整；后者保留

clientTop、clientLeft

• 获取dom的border-top（left）

scrollHeight、scrollWidth

• 获取dom的整个内容长度（比如div的height是100px，并设置了overflow-y：scroll后，div内部内容的height长度）
• 后者同理

scrollTop、scrollLeft

• 获取dom滑动出可视区域的部分的height（width）

offsetheight、offsetWidth

• 获取dom的height（width）+padding+border

offsetTop、offsetLeft

• 获取目标dom离最近的已定位元素的margintop（left）
• 这里还有个api，offsetParent用来获取离目标元素最近的已定位的元素