intersectionobserver API实现懒加载

• 用法

var io = new IntersectionObserver(callback, option)

参数：
callback参数

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

option参数

• threshold 属性 threshold: [0, 0.25, 0.5, 0.75, 1] 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]
• root 属性，rootMargin 属性

2. 基本方法

// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

3. demo
   3.1 html

	<div class="box">
        <img alt="" data-original='./image/banner-pic.png'>
        <img data-original="./image/blog-detail-pic.png" alt="">
        <img data-original="./image/michael-strickland.png" alt="">
        <img data-original="./image/pic-02.jpg" alt="">
        <div data-original="./image/renee-hensley.png" class="lastimg">
     </div>

3.2 js

var io = new IntersectionObserver(
  // entries是个数组每个值是个IntersectionObersverEntry对象 ，当有两个元素可见数组长度就是二
                entries => {
                    // console.log(entries);
                    entries.forEach(ent => {
                        if (ent.intersectionRatio > 0) {
                            let path = ent.target.getAttribute('data-original')
                            // 获取标签名
                            // let tName = ent.target.nodeName
                            let tName = ent.target.tagName
                            if (tName == 'IMG') {
                                // ent.target.setAttribute('src',path)
                                ent.target.src = path
                            } else {
                                ent.target.style.backgroundImage = "url(" + path + ")"
                            }
                        }
                    })
                })
            $('[data-original]').each((i, e) => {
                io.observe(e)
            })

标签：target,元素,API,ent,io,entries,intersectionobserver,path,加载
来源： https://blog.csdn.net/qq_39193364/article/details/120265280