## IntersectionObserver

这是浏览器内置的一个`API`，实现了`监听window的scroll事件`、`判断是否在视口中`以及`节流`三大功能。
 
<!DOCTYPE html>
<!--  兼容性 -->
<html class="no-js lt-ie9 lt-ie8 lt-ie7">  
<html class="no-js lt-ie9 lt-ie8">
<html class="no-js lt-ie9">
<html class="no-js lt-ie9">
<html class="no-js">
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        img {
            background: url('./1658310307032.jpg') no-repeat center;
            width: 250px;
            height: 250px;
            display: block;
        }
    </style>
</head>

<body>
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <!-- src="./1658310307032.jpg"   加载时图片 -->
    <!--  data-url="./2022.png"      加载完成后效果图 -->
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <img src="./1658310307032.jpg" data-url="./2022.png">
    <script>
        let imgs = document.getElementsByTagName('img')
        // 1. 一上来立即执行一次
        let io = new IntersectionObserver(function (entires) {
            //图片进入视口时就执行回调
            entires.forEach(item => {
                // 获取目标元素
                let oImg = item.target
                // console.log(item);
                // 当图片进入视口的时候，就赋值图片的真实地址  加上定时器更好的观察图片加载的效果
                setInterval(() => {
                    if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
                        oImg.setAttribute('src', oImg.getAttribute('data-url'))
                    }
                }, 1000)
            })
        })
        Array.from(imgs).forEach(element => {
            io.observe(element)  //给每一个图片设置监听
        });
        // time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
        // target：被观察的目标元素，是一个 DOM 节点对象
        // rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
        // boundingClientRect：目标元素的矩形区域的信息
        // intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
        // intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
    </script>
</body>

</html>
 
这样就很方便地实现了图片懒加载，当然这个`IntersectionObserver`也可以用作其他资源的预加载，功能非常强大。