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 属性
  1. 基本方法
// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();
  1. 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)
            })
上一篇:实验四 决策树算法及应用


下一篇:Linux必知必会--vmstat