IntersectionObserver是什么？
二、使用方法 1.创建观察对象 2.观察指定DOM对象 3.参数详解
- callback 配置参数：
- options 配置参数： 三、使用 IntersectionObserver 完成一些案例 Dom进入页面的加载动画效果(示例) 图片的懒加载效果(示例)
一、IntersectionObserver是什么？
IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗交叉状态的方法。
二、使用方法
1.创建观察对象
var observer = new IntersectionObserver(callback, options)
2.观察指定DOM对象
observer.observe( DOM对象 )
observer观察者对象在观察元素是否进入视口、祖先元素的时候，不管元素是否进入，都会触发观察者对象的回调函数！ 示例： var box = document.querySelector('.box') var observer = new IntersectionObserver(function(entries){ console.log(entries) }) observer.observe(box) 大家可以发现，程序会默认执行一次输出，因为box盒子默认就在视口当中，所以会触发一次；
当你滚动页面，box离开视口以后，还会再执行一次；所以：元素在视口中也会触发[观察者对象]，不在视口中也会触发观察者对象。
3.参数详解
1. callback 配置参数：
var observer = new IntersectionObserver(function(entries，observer){ //回回调函数接受两个参数，第二个可以不写，因为用处不大 }, options) 回调函数接受两个参数，分别是：所有被监听的dom对象集合，一般用 entries 表示； 以及观察者对象，一般用 observer表示，可写可不写。
在 entries 集合中的每一个元素都是被监听的对象，被监听的对象上有一些属性，其中比较常用的属性是：
isIntersecting true当前元素进入视口 false当前元素离开视口
target 当前DOM对象
这里要特别注意，要操作entries集合中的Dom对象，记得加索引！ var box = document.querySelector('.box'); var observer = new IntersectionObserver(function(entries){ console.log( entries[0].isIntersecting ); }) observer.observe(box) 2. options 配置参数： options是一个对象，有三个参数：
第一个参数: root: 祖先级对象 | null root属性的值可以是一个祖先级对象，这时，主要的是针对局部的滚动效果。 当root属性不写，或者值为null时，表示的是监听DOM元素与当前视口的交叉关系！
第二个参数: rootMargin: 视口的外延值相当于扩大视口的范围
rootMargin 属性是规定视口的外延值，相当于扩大了视口的范围，用于提早触发观察者回调函数
第三个参数:threshold：0-1 就是当被观察者进入视口百分之多少时触发观察者
threshold默认值是0，表示：刚进入时就触发观察者的回调函数；完全离开时，在触发观察的回调
当threshold的值是1，表示：当被监听元素完全进入视图在触发观察者的回调函数； 当元素刚离
案例展示：
