Nuxt 3中如何判断请求与静态资源加载完成并实现自定义加载页

你之前的代码只监听了页面路由的开始和完成，但page:finish钩子仅表示页面组件渲染完成，并不会等待静态资源（图片、第三方库）和接口请求加载完毕，所以加载页会提前隐藏。以下是可行的实现方案：

核心思路 #

要同时监听三类资源的加载状态：

• 所有接口请求的完成状态
• 页面静态资源（图片、样式、第三方脚本）的加载完成
• 页面切换时的状态重置

具体代码实现 #

<template>
  <div v-if="loading" class="fixed left-0 top-0 w-full z-50 bg-green-500 h-screen" />
  <NuxtPage v-else />
</template>

<script setup>
const nuxtApp = useNuxtApp();
const loading = ref(true);
// 存储当前页面未完成的请求
const pendingRequests = ref([]);

// 页面开始切换时，开启加载并清空请求列表
nuxtApp.hook('page:start', () => {
  loading.value = true;
  pendingRequests.value = [];
});

// 拦截所有通过Nuxt $fetch发起的请求，添加到待完成列表
nuxtApp.hook('fetch:request', ({ request }) => {
  pendingRequests.value.push(request);
});

// 请求完成后，从待完成列表移除，并检查是否所有资源都加载完毕
nuxtApp.hook('fetch:response', ({ request }) => {
  pendingRequests.value = pendingRequests.value.filter(req => req !== request);
  checkLoadingStatus();
});

// 监听window的load事件——该事件会在所有静态资源（图片、第三方库、样式）加载完成后触发
window.addEventListener('load', checkLoadingStatus);

// 检查是否满足隐藏加载页的条件
function checkLoadingStatus() {
  // 两个条件：无未完成请求 + 文档所有资源加载完成（document.readyState为complete）
  if (pendingRequests.value.length === 0 && document.readyState === 'complete') {
    loading.value = false;
  }
}

// 页面卸载时移除事件监听，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('load', checkLoadingStatus);
});
</script>

补充说明 #

1. 如果你的项目使用axios等其他请求库，需要给请求库添加拦截器，手动跟踪请求的开始和完成状态，更新pendingRequests数组。
2. 对于直接在HTML模板中引入的第三方脚本（比如通过head配置添加的），window.load事件会自动等待它们加载完成，无需额外处理。
3. 若页面中有懒加载的图片，如果你需要等待这些懒加载图片也加载完成，需要单独监听每个图片的onload事件，再加入判断条件。

内容的提问来源于stack exchange，提问作者roabaot