文章目录

• • 懒加载的概念
  • 懒加载实现的原理
  • 可视区域表示
  • • • 原理：
      • 过程：

懒加载的概念

对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源（当前窗口（可视区域）的大小）的时候，再对资源进行请求和加载。

懒加载实现的原理

• 1，使用img标签，scr属性初始为空
• 2，写一个自定义属性字段，该属性的值写成图片地址
• 3，当图片在可视区域的范围内的时候，将自定义属性的值作为src的值

代码示例：

• data-src是我们自己定义的属性字段，它的值为我们要的图片地址
• lazyload="true"是为了当图片加载出来后将图片不在需要懒加载了。

可视区域表示

原理：

使用：document.documentElement.clientHeight 可以获取到当前屏幕的高度。

过程：

当页面发生上滑的时候，可视区域的图片就会发生改变。

当鼠标滚轮滚动的时候，在可视区域的图片就可能出去可视区域了，不在的可能这时候就进来了可视区域。所以我们要写一个监听事件来进行监听。

当我们拿到所有的 img 时，利用循环去判断他们是否在可视区域内，在就加载出来，不在就暂时不加载。

需要满足的条件是图片的顶部在可视区域的高度里面，图片的底部也要在可视区域里面，也就是图片没有被划出去。

代码：

//获取可视区域的高度
var viewHeight = document.documentElement.clientHeight;
document.addEventListener("scroll", function() {//获取到页面上所有的img//判断某个是否进入可视区域//如果进入，就把它自身的data-original的值取出来放到srcvar arr = document.querySelectorAll("img[data-src][lazyload]");arr.forEach((item) => {let rect = item.getBoundingClientRect(); //用于一次性获取某个容器相对于浏览器上下左右的位置if (rect.top < viewHeight && rect.bottom >= 0) {item.src = item.dataset.src;item.removeAttribute("data-src");item.removeAttribute("lazyload");}});
});

获取区域的方法：

• offsetTop方法： 图片出现在视窗内的情况： offsetTop < clientHeight + scrollTop
• getBoundingClientRect方法： 图片出现在视窗内的情况： element.getBoundingClientRect().top < clientHeight
• H5的intersectionObserve方法： intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1 ，完全不可见时小于等于 0

代码：
一般是常用offsetTop的方法

// offsetTop
// el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
function isInViewPortOfOne (el) {// viewPortHeight 兼容所有浏览器写法const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight const offsetTop = el.offsetTopconst scrollTop = document.documentElement.scrollTopconst top = offsetTop - scrollTopreturn top <= viewPortHeight
}