vue3通过IntersectionObserver实现图片懒加载

原创已于 2024-03-01 16:51:39 修改 · 821 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-03-01 15:57:04 首次发布

本文介绍了如何通过data-src属性和IntersectionObserverAPI来实现在图片进入用户视野时才加载，避免了直接使用src导致的预加载问题。同时提供了使用自定义指令的方法来简化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

实现效果：图片出现时才进行加载，否则处于加载截断

加载前：
在这里插入图片描述

加载后：
在这里插入图片描述

二、data-src属性

由于直接给图片绑定src属性会导致图片直接加载，我们可以给图片添加自定义属性按需加载，同时在加载前显示加载动态图

<img src="/loading.gif" :data-src="item.img" class="music-img" />

三、IntersectionObserver（交叉观察器）

1.创建IntersectionObserver对象，接受一个回调函数，当监听元素进入可视区域触发

const observer = new IntersectionObserver(observerCallback)

2.创建回调函数，回调函数接受一个IntersectionObserverEntry 对象，里面存储每一个监听的dom状态，其中isIntersecting为true，则监听dom出现在视野中，同时为了防止图片多次加载，我们在图片加载后卸载监听

const observerCallback = (entries) => {
	entries.forEach((entry) => {
		if (entry.isIntersecting) {
			const img = entry.target
			const data_src = img.getAttribute('data-src')
			img.setAttribute('src', data_src)
			observer.unobserve(img)
		}
	})
}

3.监听图片

const imgs = document.querySelectorAll('.music-img')
		imgs.forEach((img) => {
			observer.observe(img)
		})

或者使用自定义指令

const vLazy = {
	mounted: (el) => {
		observer.observe(el)
	}
}

<img src="/loading.gif" :data-src="item.img" class="music-img" v-lazy />