IntersectionObserver

一 API

​IntersectionObserver API，可以自动"观察"元素是否可见，由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。

用法比较简单：

let io = new IntersectionObserver(cb, ops)

IntersectionObserver是浏览器原生提供的构造函数, 接受两个参数：cb是可见性变化时提供的回调函数，ops是配置对象。

构造函数返回的是一个观察器实例，此实例有很多方法，比如observer可以指定要观察的dom节点

// 开始观察
io.observer(document.getElementById('xxxx'))

// 停止观察
io.unobserver(element)

// 关闭观察器
io.disconnent()

// 返回所有观察目标的IntersectionObserverEntry对象数组
io.takeRecords() 

二 callback

目标元素的可见性变化时，就会调用观察器的回调函数callback，一般会调用两次。callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象

let io = new IntersectionObserver(entries => {
  // If intersectionRatio is 0, the target is out of view
  if(entries[0].intersectionRatio){
     // do something
  }
});

三 IntersectionObserverEntry 对象

• time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
• target：被观察的目标元素，是一个 DOM 节点对象
• rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
• boundingClientRect：目标元素的矩形区域的信息
• intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
• intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

 四   使用场景

 图片懒加载，vue的 v-lazyLoad自定义指令实现

const LazyLoad = {
    io: null,
    // install方法
    install(Vue,options){
    	  // 代替图片的loading图
        let defaultSrc = options.default;
        Vue.directive('lazy',{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc);
            },
            inserted(el){
                // 兼容处理
                if('IntersectionObserver' in window){
                    LazyLoad.observe(el);
                }else{
                    LazyLoad.listenerScroll(el);
                }
                
            },
            unbind(){
                LazyLoad.io && LazyLoad.io.disconnect();
            }
        })
    },
    // 初始化
    init(el,val,def){
        // data-src 储存真实src
        el.setAttribute('data-src',val);
        // 设置src为loading图
        el.setAttribute('src',def);
    },
    // 利用IntersectionObserver监听el
    observe(el){
        LazyLoad.io = new IntersectionObserver(entries => {
            let realSrc = el.dataset.src;
            if(entries[0].isIntersecting){
                if(realSrc){
                    el.src = realSrc;
                    el.removeAttribute('data-src');
                }
            }
        });
        LazyLoad.io.observe(el);
    },
    // 监听scroll事件
    listenerScroll(el){
        let handler = LazyLoad.throttle(LazyLoad.load,300);
        LazyLoad.load(el);
        window.addEventListener('scroll',() => {
            handler(el);
        });
    },
    // 加载真实图片
    load(el){
        let windowHeight = document.documentElement.clientHeight
        let elTop = el.getBoundingClientRect().top;
        let elBtm = el.getBoundingClientRect().bottom;
        let realSrc = el.dataset.src;
        if(elTop - windowHeight<0&&elBtm > 0){
            if(realSrc){
                el.src = realSrc;
                el.removeAttribute('data-src');
            }
        }
    },
    // 节流
    throttle(fn,delay){
        let timer; 
        let prevTime;
        return function(...args){
            let currTime = Date.now();
            let context = this;
            if(!prevTime) prevTime = currTime;
            clearTimeout(timer);
            
            if(currTime - prevTime > delay){
                prevTime = currTime;
                fn.apply(context,args);
                clearTimeout(timer);
                return;
            }

            timer = setTimeout(function(){
                prevTime = Date.now();
                timer = null;
                fn.apply(context,args);
            },delay);
        }
    }

}
export default LazyLoad;