使用defer优化页面白屏加载时间

背景:
官网首页头部轮播的图片过大, 导致页面加载过慢, 或是先加载出中部和底部部分, 页面出现次序十分不雅观, 故可自定义一个方法, 使页面组件逐帧加载
在untils.ts文件中新建方法:

import { ref,onUnmounted } from 'vue
// 给 maxCount一个最大值, 防止frameCount.value无限递增
export const useDefer = (maxCount = 4) => {
	const frameCount = ref(0); // 此处使用ref, 使 frameCount 为响应式值
	let rafId;
	function updateFrameCount() {
		rafId = requestAnimationFrame(() => {
			frameCount.value++;
			if (frameCount.value >= maxCount) {
				return;
			}
			updateFrameCount();
		});
	}
	updateFrameCount();
	//销毁
	onUnmounted(() => {
		cancelAnimationFrame(rafId);
	});
	
	return function defer(n: number) {
		return frameCount.value >= n;
	};
};

vue文件中进行使用

import { useDefer } from '@/utils/utils';
const defer = useDefer();

//可定义在第几帧加载
<Banner v-if="defer(2)" />

例: