vue3自定义指令实现图片懒加载

在电商项目中，图片资源如果初始化就全部加载不仅会影响页面的性能还会造成服务器多余的开销，实在没有必要，所以可以使用图片懒加载的方式来实现

什么是懒加载：

指的是在设定的条件下之后再执行加载资源的处理

注：本文就不介绍VueUse封装的useIntersectionObserver，想了解可以自行在官方文档查看

实现：

采用浏览器原生 API IntersectionObserver实现，useIntersectionObserver实际底层使用的也是这个API，这个API目的是提供一种高效的方式来实现懒加载、无限滚动、元素可见性检查等功能，而不会阻塞主线程，而且也它允许在不使用事件监听器或轮询的情况下，异步地观察元素何时进入或离开视口，或者与另一个容器元素交叉，从而提高了网页的性能和用户体验。

效果图

1、自定义指令代码

import { App, DirectiveBinding } from 'vue';

const install = (app: App) => {
	app.directive('lazy-load', {
		mounted(el: HTMLImageElement, binding: DirectiveBinding) {
			const options = {
				root: null, // 默认根元素是视窗
				rootMargin: '0px',
				threshold: 0.1, // 元素可见度达到10%时触发回调
			};

			const callback: IntersectionObserverCallback = (
				entries: IntersectionObserverEntry[],
				observer: IntersectionObserver
			) => {
				entries.forEach((entry: IntersectionObserverEntry) => {
					if (entry.isIntersecting) {
						// 模拟图片加载
						setTimeout(() => {
							el.src = binding.value; // 设置图片的src属性为绑定的值
							observer.unobserve(el); // 停止观察该元素
						}, 1000);
					}
				});
			};
			const observer = new IntersectionObserver(callback, options);
			observer.observe(el);
		},
	});
};

export default install;

2、需要在main.ts注册，根据各项目实际情况注册

import App from './App.vue';
import intersectionObserver from '@/directives/intersectionObserver';

const app = createApp(App);

app.use(intersectionObserver);

3、使用方法