wenhua818/src/App.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import Loader from '@/components/Loader.vue';
import ScrollDown from '@/components/ScrollDown.vue';
import Image from '@/components/Image.vue';
import { preload } from '@/utils/preload';

const loading = ref(true);
const percent = ref(0);
const resources = ref([]);

const updateCallback = (num) => {
  percent.value = Math.round(num * 100);
}

onMounted(() => {
  preload(updateCallback).then((res) => {
    loading.value = false;
    resources.value = res;
  })
});
</script>

<template>
  <Loader :loading="loading" :percent="percent" />
  <ScrollDown />
  <Image v-for="(res, inx) in resources" :key="res.image" :resource="res" :show-fog="inx === 0"></Image>
</template>

<style scoped>
</style>