凌晨不睡觉

V1

2022/10/26阅读:18主题:默认主题

通过IntersectionObserver实现懒加载

通常懒加载等都会通过监听scroll事件用getBoundingClientRect()来判断元素位置来决定是否可以开始加载。性能开销是比较大的,为了节省性能又需要各种操作去弥补,例如用节流来减少判断次数等。 IntersectionObserver API可以完全省去这些操作,只需要简单的读取即可。

点击查看IntersectionObserver 文档

示例

new IntersectionObserver(callBack, options);

  let options = {
            rootnull// 相对的根元素,null为视口
            threshold1.0 //重叠率 0.0-1.0(完全重叠即完全进入root元素) 重叠率达到要求后触发事件 
        },
        callBack = (entries, observer) => { // entries 数组,包含所有的被观察者
        
            entries.forEach(entry => {
             // isIntersecting 即是否重叠
                entry.target.innerText = entry.isIntersecting ? '加载~~~~''不可见'
            })
        },
        observer  = new IntersectionObserver(callBack, options);

        let observedList = document.querySelectorAll('h1');
        observedList.forEach(element => {
            observer.observe(element)
        });

options 配置项

传递到 IntersectionObserver() 构造函数的 options 对象,允许您控制观察者的回调函数的被调用时的环境。它有以下字段:

  • root 指定根(root)元素,用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null,则默认为浏览器视窗。
  • rootMargin 根(root)元素的外边距。类似于 CSS 中的 margin 属性,比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定 root 参数,则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围,使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为0。
  • threshold 可以是单一的 number 也可以是 number 数组,target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过50%的时候,你可以指定该属性值为0.5。如果你想要 target 元素在 root 元素的可见程度每多25%就执行一次回调,那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是0 (意味着只要有一个 target 像素出现在 root 元素中,回调函数将会被执行)。该值为1.0含义是当 target 完全出现在 root 元素中时候 回调才会被执行。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size24px;
        }
    
</style>
</head>
<body>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>

    <script>
        let options = {
            rootnull// 根元素,null为视口
            threshold1.0 //重叠率 0.0-1.0  重叠率达到要求后触发事件 
        },
        callBack = (entries, observer) => {
            entries.forEach(entry => {
                entry.target.innerText = entry.isIntersecting ? '测试''不可见';
            })
        },
        observer  = new IntersectionObserver(callBack, options);

        let observedList = document.querySelectorAll('h1');
        observedList.forEach(element => {
            observer.observe(element)
        });
    
</script>
</body>
</html>

分类:

前端

标签:

JavaScript

作者介绍

凌晨不睡觉
V1