懒加载处理
利用浏览器原生提供的构造函数 IntersectionObserver， 不要再傻傻监听页面滚动
一、IntersectionObserver简介
1. 语法
let observer = new IntersectionObserver(callback, option);/* callback 是当被监听元素的可见性变化时，触发的回调函数 option 是一个配置参数，可选，有默认的属性值*/
2. callback 参数
目标元素的可见性变化时，就会调用观察器的回调函数callback。
callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。
let observer = new IntersectionObserver( entries => { /* entries是一个数组，每个成员都是一个IntersectionObserverEntry对象 如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员 */ console.log(entries); });3. IntersectionObserverEntry对象
IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性
time: 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒;
target: 被观察的目标元素，是一个 DOM 节点对象;
rootBounds: 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null;
boundingClientRect: 目标元素的矩形区域的信息;
intersectionRect: 目标元素与视口（或根元素）的交叉区域的信息;
intersectionRatio: 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0;
4. option 对象
4.1 threshold 属性
new IntersectionObserver( entries => { // do something }, { threshold: [0, 0.25, 0.5, 0.75, 1] });/* threshold属性决定了什么时候触发回调函数。 它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。 用户可以自定义这个数组。 比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。*/ 4.2 root 属性，rootMargin 属性
new IntersectionObserver( entries => { // do something }, { root: document.querySelector('#box'), rootMargin: '10px 20px 30px 40px' });/* root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。 rootMargin定义根元素的margin， 用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。 它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。 这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。*/5. 注意
IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。
规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。 这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。
二、应用，以指令形式
<template> <div v-lazy-component="init"> </div> </template><script>export default { directive: { 'lazy-component': { // 只调用一次 bind(el, binding) { // 判断是否可以使用 if ('IntersectionObserver' in window) { // IntersectionObserver对象，浏览器原生提供的构造函数 let observer = new IntersectionObserver((entries) => { // intersectionRatio: 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0 // 是否交叉 const isIntersected = entries.some(entry => entry.intersectionRatio > 0); if (isIntersected) { // 执行绑定的事件 binding.value(); // 停止观察 observer.unobserve(el); // 关闭观察器 observer.disconnect(); } }); // 开始观察， el: DOM对象 observer.observe(el); } else { binding.value(); } } } }, methods: { init() { // do something } }}</script>原文：https://juejin.cn/post/7099365196841353230