NuxtJS 中的预加载页面

Posted 2023-02-22

【中文标题】NuxtJS 中的预加载页面

【英文标题】：Preload page in NuxtJS

【发布时间】：2021-06-05 10:46:04

【问题描述】：

我有一个 NuxtJS 静态站点，其中包含静态文本、1 张 PNG 图像（来自本地 assets 文件夹）和 vue-particles 插件。

每次我访问此页面时，页面都会按以下顺序加载：

html 加载 PNG 图像逐渐加载。 vue-particles 插件会在 2 秒后加载。

在加载完整页面之前显示加载指示器的最佳方式是什么？ 对于加载指示器，我正在考虑一个全屏 CSS 覆盖 div。

【问题讨论】：

这能回答你的问题吗？ How to run VueJS code only after Vue is fully loaded and initialized?

很遗憾没有...

我知道 Puppeteer 确实有一些空闲的助手，比如“如果网络干净超过 X 秒并且没有线程阻塞，请做一些事情”。但我猜requestIdleCallback 几乎是同一种方法，这可能对您的情况有用：developers.google.com/web/updates/2015/08/… 如果不是，探索“浏览器空闲”可能是一个不错的主意。

【参考方案1】：

//  1. Turn your loader ON at first
data() 
  loading: true,
,

// 2. Listen on `mounted` `hook` on `vue-particles` and turn OFF your loader:
<vue-particles @hook:mounted="loading = false"></vue-particles>

【讨论】：

这将在 vue-particles 组件安装后立即关闭加载器。但是，这并没有考虑到 PNG 的加载时间，对吧？

没有。在您的订单中，PNG 排在第二位。我以为你想等最后一部分。

我想等到整个页面加载完毕。

你有没有想过这个问题？我遇到了类似的问题，我的页面在页面完全加载之前呈现并导致问题。但是我找到的答案是在所有内容都实现后完成加载，而不是在加载完成之后。