I'm facing an issue while setting up a preloader. Instead of running the preloader first, it starts downloading a bunch of CSS/js files, which is not ideal. This problem is more prominent on slower connections like FAST 3G or SLOW 3G.
After researching, I found examples of using vue routing for preloading, but I'm using Vue with flask, so the routing method might not work for me, as far as I know.
Is there a way to configure it so that the preloader loads first and then background loading of other resources starts?
For the preloader, I am using the Vue plugin Vue-loading-overlay.
Sharing a snippet of my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<vue-topprogress ref="topProgress" :color="'#1d1d25'"
:height="5" :errorColor="'#f81732'"/>
<loading :active.sync="isLoading"
:is-full-page="true" :opacity="1">
<img src="../assets/images/testGif.gif" alt="this slowpoke moves" width=250/>
</loading>
</div>
</template>
<script>
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
name: 'index',
components: {
Loading,
},
data() {
return {
isLoading: true,
};
},
mounted() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
this.isLoading = false;
}
};
},
}
</script>