【前端】IntersectionObserver 实现图片懒加载和无限滚动

在前端开发中，性能优化是一个重要的考量因素。随着现代网页和应用的复杂性增加，确保页面快速加载和流畅运行变得越来越重要。本文将介绍一种强大的工具——<code>IntersectionObserver API，并结合 Vue 项目，讲解如何使用它来实现图片懒加载和无限滚动。

IntersectionObserver API 简介

<code>IntersectionObserver API 是现代浏览器提供的一种异步观察者，它可以监视一个元素与视口（或某个特定祖先元素）交叉状态的变化。它的主要用途包括：

图片懒加载无限滚动加载内容实现元素的延迟加载触发动画效果

IntersectionObserver 的基本用法

要使用 IntersectionObserver，首先需要创建一个 IntersectionObserver 实例，并传入一个回调函数和一些配置选项：

const observer = new IntersectionObserver(callback, options);

callback: 每当被观察的元素的可见性变化时，调用的回调函数。该函数接收两个参数：

entries: 被观察元素的列表，每个元素都是一个 IntersectionObserverEntry 对象。observer: IntersectionObserver 实例本身。 options: 一个可选参数对象，用于配置观察器的行为。包括以下属性：

root: 用于观察的祖先元素，默认为视口。rootMargin: 根元素的外边距，用于扩大或缩小根元素的判定区域。threshold: 一个数组，规定在什么可见比例下触发回调。

回调函数

回调函数处理 IntersectionObserverEntry 对象的数组，每个对象包含了元素的交叉信息：

const callback = (entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

// 元素进入视口

console.log('Element is in viewport:', entry.target);

// 执行懒加载操作，如加载图片

const img = entry.target;

img.src = img.dataset.src;

// 停止观察当前元素

observer.unobserve(entry.target);

}

});

};

配置选项示例

const options = {

root: null, // 默认为视口

rootMargin: '0px', // 没有外边距

threshold: 0.1 // 当 10% 的目标元素可见时触发回调

};

观察目标元素

创建 IntersectionObserver 实例后，可以使用 observe 方法来观察目标元素：

const img = document.querySelector('img');

observer.observe(img);

完整示例

以下是一个完整的示例，展示如何使用 IntersectionObserver 实现图片懒加载：

document.addEventListener('DOMContentLoaded', () => {

const images = document.querySelectorAll('img[data-src]');

const callback = (entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

observer.unobserve(img);

}

});

};

const options = {

root: null,

rootMargin: '0px',

threshold: 0.1

};

const observer = new IntersectionObserver(callback, options);

images.forEach(image => {

observer.observe(image);

});

});

更加深入的学习我推荐：阮一峰的帖子

在 Vue 项目中实现图片懒加载

接下来，我们将结合 Vue 项目，使用 IntersectionObserver 实现图片懒加载。首先，我们需要创建一个自定义指令 v-lazy。

创建自定义指令

在 Vue 中，我们可以通过自定义指令来实现懒加载。以下是一个简单的实现：

Vue.directive('lazy', {

inserted: function(el, binding) {

let observer;

if (IntersectionObserver) {

observer = new IntersectionObserver(entries => {

entries.forEach(entry => {

if (entry.isIntersecting) {

observer.unobserve(el);

const src = binding.value;

el.src = src;

}

});

});

observer.observe(el);

} else {

// 如果浏览器不支持 IntersectionObserver，需要提供一个降级方案

el.src = binding.value;

}

}

});

在模板中使用指令

<template>

<div>

<img v-lazy="imageSource" alt="Lazy loaded image" />code>

</div>

</template>

<script>

export default {

data() {

return {

imageSource: 'path/to/image.jpg'

};

}

};

</script>

这样，当图片进入视口时，v-lazy 指令会触发加载图片，从而实现懒加载。

在 Vue 项目中实现无限滚动