More drake

frontend/app/components/Sprite.vue

@@ -1,5 +1,5 @@
 <template>
-<img ref="sprite" 
+<img ref="sprite" v-show="loaded"
     class="sprite pixelated"
     :src="frame_paths[0]" 
     :width="props.width">
@@ -20,6 +20,7 @@ const props = defineProps<{
 }>();
 
 const sprite = ref(null);
+const loaded = ref(false);
 
 let frame_paths = [];
 for(let i = 1; i <= parseInt(props.frames); i++){
@@ -29,15 +30,34 @@ for(let i = 1; i <= parseInt(props.frames); i++){
 let current = 0;
 const fps = props.fps ? parseInt(props.fps) : 4;
 
+function preloadImages(imageArray) {
+  return Promise.all(
+    imageArray.map(src => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = resolve;
+        img.onerror = reject;
+      });
+    })
+  );
+}
+
 onMounted(() => {
     sprite.value.style.top = props.top;
     sprite.value.style.left = props.left;
     sprite.value.style.bottom = props.bottom;
     sprite.value.style.right = props.right;
-    setInterval(() => {
+    
-        current = (current + 1) % frame_paths.length;
+    loaded.value = true;
-        sprite.value.src = frame_paths[current];
+    
-    }, 1000 / fps);
+    preloadImages(frame_paths).then(() => {
+        setInterval(() => {
+            current = (current + 1) % frame_paths.length;
+            sprite.value.src = frame_paths[current];
+        }, 1000 / fps);
+    });
+    
 });
 </script>
 

frontend/app/pages/index.vue

@@ -17,7 +17,7 @@ onMounted(async () => {
     <h1>ARANROIG.COM</h1>
     
     <Container>
-        <Sprite path="/sprites/alfadir/" frames="1" fps="1" top="-369px" right="-80px" width="800"></Sprite> 
+        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-416px" right="-180px" width="900"></Sprite> 
     <p>Hi, I'm Aran!
         <br>Welcome to my website! It is still under intense development, so I recommend to come back later!
       </p>