JavaScript API： IntersectionObserver

最新推荐文章于 2024-04-08 19:34:06 发布
最新推荐文章于 2024-04-08 19:34:06 发布
阅读量797 收藏 5
点赞数 3
分类专栏： 学习 JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41897680/article/details/134947827
版权

简介

IntersectionObserver 是一个 JavaScript API，用于监测一个元素与其父元素或视窗的交叉状态。它可以用来判断一个元素是否可见或者在视窗中的位置是否发生变化。

使用 IntersectionObserver，你可以注册一个回调函数，当被观察的元素进入或离开视窗，或者与其父元素发生交叉时，该回调函数将被触发。这个 API 提供了一种高效的方法来监测元素的可见性，尤其在处理滚动事件时非常有用。

通过 IntersectionObserver，你可以实现一些常见的功能，例如延迟加载（当元素进入视窗时再加载内容）、无限滚动（滚动到底部时加载更多内容）以及元素的懒加载（当元素进入视窗时再加载真实内容，而不是占位符）等。它能够帮助你提高页面性能，减少不必要的资源加载，以及改善用户体验。

总结来说，IntersectionObserver 是一个用于监测元素可见性和位置变化的 API，可以实现一些常见的交互效果和性能优化。

具体内容见官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

下面说两个简单的应用案例

案例一：滚动动画

在这里插入图片描述

<template>
  <div id="abc">
    <div class="observer-item">content-1</div>
    <div class="observer-item">content-2</div>
    <div class="observer-item">content-3</div>
    <div class="observer-item">content-4</div>
    <div class="observer-item">content-5</div>
    <div class="observer-item">content-6</div>
    <div class="observer-item">content-7</div>
    <div class="observer-item">content-8</div>
    <div class="observer-item">content-9</div>
    <div class="observer-item">content-10</div>
    <div class="observer-item">content-11</div>
    <div class="observer-item">content-12</div>
    <div class="observer-item">content-13</div>
    <div class="observer-item">content-14</div>
    <div class="observer-item">content-15</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(() => {
  // 获取所有的元素
  const elements = document.querySelectorAll(".observer-item");
  console.log(elements.length);

  // 使用IntersectionObserver 来检测子元素与父元素的交叉状态
  const observer = new IntersectionObserver(callback);
  elements.forEach((ele) => {
    ele.classList.add("opaque");
    // 观察元素
    observer.observe(ele);
  });

  function callback(entries, instance) {
    entries.forEach((entry) => {
      // 判断元素是否出现在父元素中
      // 每个对象表示一个目标元素与父元素或视窗的交叉状态信息，包括目标元素的位置、大小、可见性等
      if (entry.isIntersecting) {
        const element = entry.target;
        element.classList.remove("opaque");
        element.classList.add("come-in");
        instance.unobserve(element);
      }
    });
  }
});
</script>

<style scoped>
#abc {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  overflow-y: scroll;
  margin-left: 500px;
}
.observer-item {
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
}
.observer-item:nth-child(odd) {
  background-color: pink;
}
.observer-item:nth-child(even) {
  background-color: skyblue;
}
.opaque {
  opacity: 0;
}
.come-in {
  opacity: 1;
  transform: translateY(150px);
  animation: come-in 1s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 1s;
}
@keyframes come-in {
  100% {
    transform: translateY(0);
  }
}
</style>

案例二：无限滚动（滚动到底部时加载更多内容）

这个应用应该更广泛一点，原来判断是否滚动到底的话一般是采用下面这种方案

<script>
  window.onload = () => {
    // 基本思路
    // 滚动体条所能滚动的最大高度 + continer的高度 = 子盒子（item）的高度；
    const container = document.querySelector(".container");
    console.dir(container);
    const item = document.querySelector(".item");
    container.addEventListener("scroll",() => {
        // 父盒子的高度
       const clientHeight = container.clientHeight;
       // 子盒子的高度（滚动盒子的高度）
       const scrollHeight = container.scrollHeight;
       // 滚动的最大距离
       const scrollHeight_clientHeight = scrollHeight - clientHeight;
       // 实时滚动距离
       const scrollTop = container.scrollTop;
       // 滚动的最大距离小于等于实时滚动距离时，滚动到了底部
        if(scrollHeight_clientHeight <= scrollTop){
            console.log("滚动到底部");
        }
    })
  };
</script>

现在的话可以通过IntersectionObserver 来实现，基本思路是：

  • 创建一个 IntersectionObserver 实例，指定观测的根元素（滚动容器）和阈值（thresholds）。
  • 将最后一个加载元素作为观测目标，调用 IntersectionObserver 的 observe 方法开始观测。
  • 在 IntersectionObserver 的回调函数中，当最后一个加载元素与容器底部交叉时，触发加载更多的操作。
  • 加载更多的操作可以是异步请求数据，更新页面内容等。
  • 在加载完成后，更新最后一个加载元素的位置，继续观测。

在这里插入图片描述
在这里插入图片描述

<template>
  <div v-loading="loading">
    <div id="abc">
      <div v-for="item in list" :key="item" class="observer-item">
        content-{{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const loading = ref(false);
const lastElement = ref();

onMounted(() => {
  // 使用IntersectionObserver 来检测子元素与父元素的交叉状态
  const observer = new IntersectionObserver(callback);
  // 观察最后一个元素
  lastElement.value = document.querySelector(".observer-item:last-child");
  // 观察元素
  observer.observe(lastElement.value);

  function callback(entries, instance) {
    entries.forEach((entry) => {
      // 判断元素是否出现在父元素中
      if (entry.isIntersecting) {
        const target = entry.target;
        console.log("滚动到底了：", target);
        // 加载新数据
        // 取消上一个元素的观察
        instance.unobserve(lastElement.value);
        if (list.value.length < 15) {
          loading.value = true;
          list.value.push(...[11, 12, 13, 14, 15]);
          setTimeout(() => {
            // 更新新的观察对象
            lastElement.value = document.querySelector(
              ".observer-item:last-child"
            );
            observer.observe(lastElement.value);
            loading.value = false;
          }, 1000);
        }
      }
    });
  }
});
</script>

<style scoped>
#abc {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  overflow-y: scroll;
  margin-left: 500px;
}
.observer-item {
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
}
.observer-item:nth-child(odd) {
  background-color: pink;
}
.observer-item:nth-child(even) {
  background-color: skyblue;
}
</style>

优点

<template>
  <div v-loading="loading">
    <div id="abc">
      <div v-for="item in list" :key="item" class="observer-item">
        content-{{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const loading = ref(false);
const lastElement = ref();

onMounted(() => {
  // 使用IntersectionObserver 来检测子元素与父元素的交叉状态
  const observer = new IntersectionObserver(callback);
  // 观察最后一个元素
  lastElement.value = document.querySelector(".observer-item:last-child");
  // 观察元素
  observer.observe(lastElement.value);

  function callback(entries, instance) {
    entries.forEach((entry) => {
      // 判断元素是否出现在父元素中
      if (entry.isIntersecting) {
        const target = entry.target;
        console.log("滚动到底了：", target);
        // 加载新数据
        // 取消上一个元素的观察
        instance.unobserve(lastElement.value);
        if (list.value.length < 15) {
          loading.value = true;
          list.value.push(...[11, 12, 13, 14, 15]);
          setTimeout(() => {
            // 更新新的观察对象
            lastElement.value = document.querySelector(
              ".observer-item:last-child"
            );
            observer.observe(lastElement.value);
            loading.value = false;
          }, 1000);
        }
      }
    });
  }
});
</script>

<style scoped>
#abc {
  width: 400px;
  height: 300px;
  border: 1px solid red;
  overflow-y: scroll;
  margin-left: 500px;
}
.observer-item {
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
}
.observer-item:nth-child(odd) {
  background-color: pink;
}
.observer-item:nth-child(even) {
  background-color: skyblue;
}
</style>

兼容性

在这里插入图片描述

无知的小菜鸡
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS63 IntersectionObserver API
多啦的博客
10-31 696
元素可见性 页面的可见性可以用document.visibilityState或者document.hidden获得，通过document.visibilitychange来监听页面可见性的变化，但是对于页面的元素的可见性却只能手动通过位置判断。 例如下面这个例子 需要监听scroll事件，根据target元素的是否出现，来更改顶部的文字和样式。由于target内嵌了几层，所以判断时需要通过ge...
IntersectionObserver：前端性能优化的新利器
LuckyWinty的博客
01-31 162
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群IntersectionObserver：前端性能优化的新利器在当今网页设计中，用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API，那些性能上的优化。IntersectionObserver 是什么？IntersectionObserver 是一种 JavaScr...
JS：IntersectionObserver（监听目标元素是否出现在窗口中）
最新发布
qq_45820271的博客
04-08 638
在前端中监听一个元素与可视窗口是否存在交叉/重叠（一个元素是否在可视窗口中）
JS总结——IntersectionObserverAPI
qq_53008257的博客
05-03 1779
什么是IntersectionObserver 文档中的描述为:​​​​​​​Intersection Observer API​的IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。祖先元素或视口称为根。 ntersectionObserver能做什么 可以监视页面中的一个元素是否出现在视口中，以此可以衍生出许多功能，当这个元素出现在视口中时，可以处理发送请求，触发动画等等业务。 如何使用 我们来分析一下官方给的案例 在使用之前，我们需要对Int
JS IntersectionObserver使用案例
菜鸟记录
03-10 929
⏹ new IntersectionObserver( )使用
react-infinite-scroll-list:使用IntersectionObserver API管理无限列表
04-29
注意：该库基于 API，尚未得到广泛支持。 检查并根据需要添加 ！ 在上查看示例 用法 将模块导入您的应用程序： // From ES6 import InfiniteList from 'react-infinite-scroll-list' ; // From CJS const ...
react-lazy:使用IntersectionObserver进行React的通用惰性加载器组件
05-02
使用出色的使用现代的IntersectionObserver API。 还可以选择通过添加条件注释来跳过noscript元素来支持在IE8和更早版本上显示内容。 npm install react - lazy import { Lazy } from 'react-lazy' // or import {...
React-Infinite-Scroll-and-Lazy-Loading:使用IntersectionObserver API在React功能组件中实现无限滚动和图像延迟加载
04-29
无限滚动+图像延迟加载 使用HTML IntersectionObserver API实现无限滚动和图像延迟加载。 阅读上的文章 观看实时预览： : 快速入门指南 克隆仓库 运行yarn安装项目依赖项 运行yarn start启动项目。
react-simple-img:with使用IntersectionObserver API和优先级提示来响应惰性加载图像
04-13
使用IntersectionObserver API，优先级提示和动画对惰性加载图像进行智能React 特征 通过仅加载折页上方的图像来加快初始页面加载 响应占位符和动画 具有重要性属性的支持 使用智能下载逻辑 用法简单，体积小，包括...
vue-li:一个Vue.js组件，可以使用Intersection Observer延迟加载图像
03-19
v懒惰图像 一个Vue.js组件，可以在使用进入视口时自动延迟加载图像。 你知道吗？在这里，您可以以简洁的格式学习有关Vue.js生态系统的提示，非常适合忙碌的开发人员！ :unicorn: 演示版 ， ， 用法 npm install v-lazy-image 警告：如果您要针对不支持该浏览器的浏览器，则需要安装 。 您可以全局注册该组件，以便在所有应用程序中都可以使用该组件： import Vue from "vue" ; import { VLazyImagePlugin } from "v-lazy-image" ; Vue . use ( VLazyImagePlugin ) ; 或在您的任何组件中本地使用它： import VLazyImage from "v-lazy-image" ; export default { components : { VLazyImage
JS小知识，Intersection Observer API 使用指南
前端达人
02-16 3753
使用Intersection Observer API在JavaScript中实现懒加载，无限滚动等功能，而不需要使用复杂的逻辑或导致性能问题。Intersection Observer API 用于异步观察元素与浏览器视口的交集变化。它使得检测元素的可见性，或者两个元素的相对可见性变得容易，而不会使网站变得缓慢并降低用户体验。本文将介绍关于Intersection Observer的所有内容。I...
IntersectionObserver API
qq_45279180的博客
10-21 260
最近看到一个手写图片懒加载的文章，里面用了两种方法，一种是大家都很熟悉的onScroll事件，另一种就是IntersectionObserver这个API，然后我查了一下感觉还是很有用的，所以记录一下。 Intersection Observer API Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。简单来说，这个API就是用来检测目标元素与其父级或祖先元素或者视口是否接触。在以前我们需要监听元素的OnScroll事件然后在
Intersection Observer API
文摘资讯
01-04 247
交叉观察器 API（Intersection Observer API）提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：1.在页面滚动时“懒加载”图像或其他内容。2.实现“无限滚动”网站，在滚动过程中加载和...
IntersectionObserver
weixin_33858336的博客
03-28 179
今天调试一个做好了的静态网页，用的是jQuery和原生js 在做动画的时候用到了 IntersectionObserver 这个api 来监听元素是否出现在视口 结果发现 兼容性非常差: 兼容性查询网站 www.caniuse.com 但是找到了一个仓库解决了该问题。 该仓库由w3c提供 IntersectionObserver 兼容脚本 下载: npm i intersection-obse...
IntersectionObserverAPI的介绍
m0_45253204的博客
10-11 303
IntersectionObserverAPI的介绍及其使用场景
IntersectionObserver API 使用
literarygirl的博客
03-25 464
IntersectionObserver API IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。 ...
IntersectionObserver API 使用教程
来啊 快活啊
03-01 339
IntersectionObserver API 使用教程
Intersection Observer API 详解
rkcy的博客
05-10 827
以前，我们通常需要基于 JavaScript 来编写自己的监测逻辑，这样会对浏览器的性能产生一定的影响。现在，有一种新的浏览器 API——Intersection Observer API，它可以帮助我们精确地监测指定元素是否出现在浏览器的视口中，而且不会对性能产生明显影响。Intersection Observer API 是一种非常实用而且易于使用的浏览器 API，可用于实现一些业务需求和性能优化，并且对于开发者来说，可以帮助我们摆脱处理交叉信息的代码细节，更加专注于实现业务功能。构成的数组作为参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无知的小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值