perf: added lazy loading to images

NekoNyaDevs · Oct 2, 2024 · dabbc39 · dabbc39
1 parent 5909cde
commit dabbc39
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -31,7 +31,7 @@ onMounted(() => {
     </div>
     <div class="d-flex align-items-center justify-content-center flex-wrap flex-column center">
       <div class="rounded p-0 border border-3 border-primary image-main-frame">
-        <img :src="imageUrl" v-if="imageUrl" alt="neko" class="object-fit-contain main-image" @error="$event.target.src='https://http.cat/404'" />
+        <img :src="imageUrl" loading="lazy" v-if="imageUrl" alt="neko" class="object-fit-contain main-image" @error="$event.target.src='https://http.cat/404'" />
       </div>
       <div class="btn-toolbar justify-content-center gap-2 mt-2" role="group">
         <button @click="fetchImage" role="button" class="btn btn-primary" :disabled="isLoading">New one!</button>

diff --git a/src/pages/random/[type].vue b/src/pages/random/[type].vue
@@ -43,7 +43,7 @@ onMounted(() => {
     </div>
     <div class="row">
       <div class="d-flex justify-content-center">
-        <img class="img-fluid mt-3 mx-auto" v-if="imageUrl" @error="$event.target.src='https://http.cat/404'" :alt="$route.params.type" :src="imageUrl">
+        <img class="img-fluid mt-3 mx-auto" loading="lazy" v-if="imageUrl" @error="$event.target.src='https://http.cat/404'" :alt="$route.params.type" :src="imageUrl">
       </div>
     </div>
   </main>