SvelteKit 加载动画

Question

我发现 sveltekit 在 .js 文件 SSR 中执行 load() 函数。 我不喜欢的是他们如何呈现页面，即使加载没有完全完成（即使使用 .server.js）。

奇怪的动画页面示例

我找到了解决方法

hide the page

直到其完全加载，

onMount()

。

  // Loading Screen
  let isLoading = true
  onMount(() => {
    isLoading = false
  })

加载后

实施示例

<script>
  // Svelte
  import {onMount} from "svelte"
  import moment from "moment"
  import axios from "axios"

  // Components
  import HomeHeader from "./home/HomeHeader.svelte"
  import HomeNewsMain from "./home/HomeNewsMain.svelte"
  import HomeNewsLatest from "./home/HomeNewsLatest.svelte"
  import HomeCards from "./home/HomeCards.svelte"
  import LoadingFull from "$lib/components/LoadingFull.svelte"
  import Skew_LightGray_White from "$lib/assets/Skew_LightGray_White.png"
  import {GmsStore} from "$lib/stores/GmsStore.js"

  // Navbar
  import {NavbarStore} from "$lib/stores/NavbarStore"
  NavbarStore.set({
    ...$NavbarStore,
    currentTheme: "white",
  })

  // Ads
  import {AdsStore} from "$lib/stores/AdsStore.js"
  AdsStore.set(true)

  // Fetch Data
  export let data

  // Loading Screen
  let isLoading = true
  onMount(() => {
    isLoading = false
  })
</script>

<svelte:head>
  <title
    >{$GmsStore?.title ? `${$GmsStore.title} - ` : ""}{$GmsStore?.header?.home.title
      ? $GmsStore?.header?.home.title
      : ""}
  </title>
  <meta
    name="description"
    content={$GmsStore?.header?.home.desc ? $GmsStore?.header?.home.desc : ""} />
</svelte:head>

{#if !isLoading}
  <main>
    <HomeHeader />
    <HomeNewsMain />
    <HomeNewsLatest data={data.news} />
    <img src={Skew_LightGray_White} class="w-full h-[120px]" />
    <HomeCards />
  </main>
{:else}
  <LoadingFull />
{/if}

有什么具体的方法可以处理吗？ 比如如何完全等待页面加载到服务器中（比如php？）

Answer 1

这很奇怪，因为我认为这与加载函数没有直接关系。据我所知，问题在于导航栏加载缓慢，然后弹出页面的其余部分，而依赖于加载函数的实际元素立即可见。

每次刷新时都会持续发生这种情况吗？单击上面的链接进行客户端导航怎么样？

顺便说一句，很多网页都有这样的旋转器或占位符，可能是出于同样的原因。如果你想让页面立即出现，并且只是动态加载动态数据，我能想到的唯一解决方案是预渲染+动态数据。不过，在这样做之前，我会先阅读本章。

• 在

  page.js/ts

  做

  export const prerender = true

• 使用 on mount 加载数据而不是显示微调器

let data

onMount(async () => {
   data = await fetch(....)
}

然后，如果您

npm run build

和

npm run preview

，您的页面将呈现为静态 html，只有该数据是动态的。这并不理想，但如果这不是 css 或您正在使用的字体的缓存问题（您是否禁用了浏览器的缓存？），那么这是我唯一能想到的在没有加载微调器的情况下执行此操作的方法。

编辑：顺便说一句，您是否在 header svelte 组件中做了一些有趣的事情？您也可以粘贴该代码吗？