背景:
官网首页头部轮播的图片过大, 导致页面加载过慢, 或是先加载出中部和底部部分, 页面出现次序十分不雅观, 故可自定义一个方法, 使页面组件逐帧加载
在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)" />
摘自 https://blog.csdn.net/weixin_49022197/article/details/133032495
