资讯|掌握Intersection Observer API，轻松实现实现图片懒加载、元素滚动动画、无限滚动加载等功能

掌握Intersection Observer API，轻松实现实现图片懒加载、元素滚动动画、无限滚动加载等功能

一、什么是 Intersection Observer API？

二、为什么需要 Intersection Observer？

三、Intersection Observer 如何使用

1、Intersection Observer 基本用法

2、图片懒加载

3、元素入场动画

4、无限滚动（加载更多）

四、使用 Intersection Observer 的关键点

五、结语

作者：watermelo37

CSDN万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。

一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

掌握Intersection Observer API，轻松实现实现图片懒加载、元素滚动动画、无限滚动加载等功能

一、什么是 Intersection Observer API？

Intersection Observer API 是浏览器提供的一个强大接口，用来异步观察一个元素是否进入（或者离开）另一个元素或视口（viewport）的可视范围。

通俗地说就是："我想知道某个元素什么时候滚动到屏幕上了。"

而且，它不会阻塞主线程，性能非常好。

二、为什么需要 Intersection Observer？

在它出现之前，通常我们需要这么做：


window.addEventListener('scroll', function () {
  const rect = element.getBoundingClientRect();
  if (rect.top < window.innerHeight && rect.bottom > 0) {
    console.log('元素进入可视区了');
  }
});

这种方法有什么缺点？

频繁触发 scroll 事件，性能差。
手动判断元素位置，代码复杂。
在复杂页面，滚动卡顿很明显。

Intersection Observer 在浏览器底层优化，异步触发并自动判断是否进入可视区，调用简单优雅，完美解决了这些问题！

三、Intersection Observer 如何使用

1、Intersection Observer 基本用法

先来一份最基础的例子：


// 1. 创建观察器
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
      observer.unobserve(entry.target); // 停止观察（可选）
    }
  });
}, {
  root: null, // null 代表视口
  threshold: 0.1 // 触发时元素可见10%
});
 
// 2. 选中目标元素
const target = document.querySelector('.target');
 
// 3. 开始观察
observer.observe(target);

2、图片懒加载

以前：图片一股脑加载 → 网速慢 + 用户体验差

现在：图片快滚到屏幕再加载，省流量 + 加速首屏！


<template>
  <div>
    <img
      v-for="(img, index) in images"
      :key="index"
      :data-src="img"
      src="placeholder.jpg"
      class="lazy-image"
      ref="lazyImages"
      alt="Lazy Load Image"
    />
  div>
template>
 
 
<style scoped>
.lazy-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
style>

3、元素入场动画

滚动到元素时添加 .show 类名，播放动画。


<template>
  <div>
    <div
      v-for="(item, index) in 5"
      :key="index"
      ref="animatedElements"
      class="fade-in"
    >
      内容 {{ index + 1 }}
    div>
  div>
template>
 
<style scoped>
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
style>

4、无限滚动（加载更多）

滚到底部时自动加载新数据即可，这里只给一个简单的demo，实际实现还需要考虑内存泄漏、用户操作友好性等问题。


<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list-item">
      {{ item }}
    div>
 
    <div ref="loadMoreTrigger" class="load-more">
      加载更多...
    div>
  div>
template>
 
<style scoped>
.list-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
 
.load-more {
  padding: 20px;
  text-align: center;
  color: gray;
}
style>

四、使用 Intersection Observer 的关键点

总结下来就是四个关键步骤：

步骤	说明
1	用 ref 获取 DOM 元素
2	在 onMounted 中创建 IntersectionObserver
3	给需要观察的元素 .observe()
4	在 onBeforeUnmount 中 .disconnect() 清理