指定元素懒加载

指定元素懒加载

• IntersectionObserver API
  IntersectionObserver 是一个现代的浏览器 API，用于监测一个或多个目标元素与其祖先元素或文档视口之间的交叉状态。它提供了一种有效且高性能的方式来检测元素的可见性，并在可见性发生变化时触发回调函数。

• 使用该API可以实现在用户滚动到vue3Autocounter所属div时才开始计数

• 亦可结合动态引入组件实现组件的懒加载

<div ref="counterDiv" class="bigDiv">
            <h1>海量数据h1>
            <div class="counterDiv">
                <div>
                    <div class='counterD'>div>
                    <vue3-autocounter class='counter' :startAmount='0' :endAmount='10000' :duration='2' prefix=''
                        suffix='$' separator=',' decimalSeparator='.' :decimals='0' :autoinit='false'
                        ref="counter1" />
                div>
            div>
        div>
1
2
3
4
5
6
7
8
9
10
11

<script setup>
import Map from '../components/Map.vue'
import { ref, onMounted } from 'vue'

const counterDiv = ref(null)
const counter1 = ref(null)

onMounted(() => {
    const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5 // 触发回调的阈值
    }

    const callback = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 如果进入视口，计数器
                counter1.value.start()
                observer.unobserve(entry.target) // 只触发一次
            }
        })
    }

    const observer = new IntersectionObserver(callback, options)
    observer.observe(counterDiv.value)
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

当网页加载时，这段代码会执行一次。它使用了 IntersectionObserver 这个现代的浏览器 API。这个 API 允许我们监视一个或多个元素与视口的交叉状态，也就是元素是否可见。在这个例子中，我们将使用它来实现懒加载的效果。

首先，我们定义了一个名为 options 的对象，其中包含了我们监视交叉状态时的一些选项。例如，threshold 参数指定了元素的多少部分需要可见时才触发回调函数。在这里，我们将它设为 0.5，表示元素至少一半进入视口时触发回调。

然后，我们定义了一个回调函数 callback，它会在目标元素与视口交叉状态改变时被调用。在这个函数中，我们检查了所有传递给回调函数的条目，并针对每个条目执行相应的操作。如果目标元素进入了视口（即 entry.isIntersecting 为 true），我们会启动一些计数器（在实际应用中可能是一些动画或其他效果），然后停止观察这个目标元素，以确保回调函数只被触发一次。

最后，我们创建了一个 IntersectionObserver 的实例，并将我们定义的回调函数和选项对象传递给它。然后，我们调用 observer.observe() 方法，以开始观察指定的目标元素 counterDiv。