IntersectionObserver API js懒加载实现方法 和 普通onscroll懒加载图片

    <div id="info">我藏在页面底部，请向下滚动</div>
    <div id="content"></div>
    <div class="test">adsfasfd</div>
    <div id="target"></div>
    <div id="h" style="height:1000px;"></div>
    <div class="test">adsfasfd</div>

<script type="text/javascript">
    function query(selector) {
        return Array.from(document.querySelectorAll(selector));
    }
    let observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (element, index) {
            // console.log(observer.takeRecords());
            if (element.isIntersecting) {
                info.textContent = "我出来了";
            } else {
                info.textContent = "我藏在页面底部，请向下滚动"
            }
        });

    }, {
        root: null,
        threshold: [0, 1]
    })
    query(document.querySelectorAll('.test').forEach((item) => {
        observer.observe(item);
    }))
    // observer.observe(document.querySelectorAll('.test')[0])
</script>

 

2.普通懒加载

    <div style="height:2000px">sd</div>
    <div><img src="https://img02.ma.scrmtech.com/a1d98e5e525c5158689e3e7fdbdc8c85"
            data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420116810&di=78c6ab56b2974416856e8a3ffc9f17aa&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-12-01%2F5a2141c1bc62e.jpg"
            alt=""></div>

<script type="text/javascript">
    // onload是等所有的资源文件加载完毕以后再绑定事件
    window.onload = function () {
        // 获取图片列表，即img标签列表
        var imgs = document.querySelectorAll('img');

        // 获取到浏览器顶部的距离
        function getTop(e) {
            return e.offsetTop;
        }

        // 懒加载实现
        function lazyload(imgs) {
            // 可视区域高度
            var h = window.innerHeight;
            //滚动区域高度
            var s = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
                if ((h + s) > getTop(imgs[i])) {
                    // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
                    (function (i) {
                        setTimeout(function () {
                            // 不加立即执行函数i会等于9
                            // 隐形加载图片或其他资源，
                            //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
                            var temp = new Image();
                            temp.src = imgs[i].getAttribute('data-src');//只会请求一次
                            // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
                            temp.onload = function () {
                                // 获取自定义属性data-src，用真图片替换假图片
                                imgs[i].src = imgs[i].getAttribute('data-src')
                            }
                        }, 2000)
                    })(i)
                }
            }
        }
        lazyload(imgs);

        // 滚屏函数
        window.onscroll = function () {
            lazyload(imgs);
        }
    }
</script>