Nuxt 3 页面加载器在图像仍在加载时停止

Question

我想显示加载屏幕，直到我的网站完全加载完毕。

<NuxtLoadingIndicator>

或像

page:finish

或

page:loading:end

这样的运行时钩子对我不起作用。两者都在图像仍在加载时显示页面。

到目前为止我已经尝试过：

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

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
  const nuxtApp = useNuxtApp();
  const loading = ref(false);
  nuxtApp.hook("page:start", () => {
    loading.value = true;
  });
  nuxtApp.hook("page:finish", () => {
    loading.value = false;
  });
</script>

还有：

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator />
    <NuxtPage />
  <NuxtLayout>
</template>

我正在 PWA 模式下运行应用程序 (

SSR:false

)

Answer 1

因为

<NuxtLoadingIndicator>

是在路由器加载时完成加载的，而不是加载页面上的资源。

---

如果您想手动处理

<NuxtLoadingIndicator>

的进度，请使用

useLoadingIndicator().isLoading

<template>
   <img
        :load="loadedTheResource"
   />
</template>
<script lang="ts" setup>

const loadingIndicator = useLoadingIndicator();

loadingIndicator.isLoading.value = true;

const loadedTheResource = () => {
    loadingIndicator.isLoading.value = false;
};

</script>