Nuxt.js 自定义加载器不会立即加载

Posted 2023-02-23

【中文标题】Nuxt.js 自定义加载器不会立即加载

【英文标题】：Nuxt.js custom loader not loading instantly

【发布时间】：2021-06-04 03:28:46

【问题描述】：

所以我的自定义加载器不会像瞬间加载那样立即加载，然后它在这里加载是我的网站，我的目标是加载我的自定义组件。 PS当我将s-s-r更改为false时它可以工作 这是我的网站：https://micahkwaka.dev

export default 
  loading: '~/components/LoadingBar.vue',

  loadingIndicator: false,

  s-s-r: true,

  pageTransition: 
    name: 'my-page',
    mode: 'out-in'
  ,

  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',

【问题讨论】：

这可能是你补液前的延迟。我怀疑你对此无能为力。

所以我对此无能为力？ @kissu

【参考方案1】：

编辑：这个加载器是当你有一个 SPA 时，在显示内容之前等待它加载。由于您将 Nuxt 用作通用应用程序（s-s-r + 客户端），因此您将首先拥有静态内容（在 JS 启动之前，因此您的动画）。因此，您可以使用静态 SVG/CSS 制作一个，但支持的 JS 加载器不是这里的解决方案。

最好的方法是禁用 JS 来测试最终结果。不过，我很确定如果您没有任何加载程序，Google 会给您一个更好的评价。您也许可以将它添加到您的页面转换中。

对于动画本身，从它开始，然后setTimeout 在 500 毫秒或类似时间后将其移除。有很多方法可以做到。但是您需要在页面的初始渲染中使用它（在 JS 水合之前）。

---

如果你愿意，为什么要将 loadingIndicator 设置为 false？

如果您想要自定义一个，请按照文档中的说明提供密钥路径：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator/