enhance carousel loading performance

Author: Xanonymous-GitHub

package-lock.json

@@ -33,10 +33,10 @@
     "firebase": "^8.2.1",
     "lint-staged": "^10.5.3",
     "lozad": "^1.16.0",
-    "postcss": "^8.2.2",
+    "postcss": "^8.2.3",
     "postcss-loader": "^4.1.0",
     "prerender-spa-plugin": "^3.4.0",
-    "sass": "^1.32.0",
+    "sass": "^1.32.2",
     "sass-loader": "^10.1.0",
     "svg-sprite-loader": "^5.2.1",
     "typescript": "^4.1.3"

package.json

@@ -7,7 +7,7 @@
     </ol>
     <div class="carousel-inner rounded-3">
       <div v-for="(url, k) in imageList" :key="k" class="carousel-item">
-        <LazyImg :d-src="url" class="carousel-img d-block w-auto mw-100 mx-auto rounded-3"/>
+        <LazyImg :d-src="url" :force-load="forceLoad[k]" class="carousel-img d-block w-auto mw-100 mx-auto rounded-3"/>
       </div>
     </div>
 
@@ -32,6 +32,7 @@ export default defineComponent({
   setup() {
     const data = reactive({
       imageList: [] as Array<string>,
+      forceLoad: [] as Array<boolean>,
       carouseControllerConfig: [
         {
           text: 'Previous',
@@ -61,6 +62,11 @@ export default defineComponent({
           carouselIndicators[0].classList.add('active')
         }
       })
+
+      for (let i = 0; i < data.imageList.length; i++) {
+        data.forceLoad[i] = true
+        await new Promise<void>(resolve => setTimeout(() => resolve(), 300))
+      }
     })
 
     return {

src/components/Carousel.vue

@@ -1,8 +1,8 @@
 <template>
-  <span class="position-absolute middle" style="z-index: 10000">
+  <span class="position-absolute middle z">
     <progress class="pure-material-progress-circular"/>
   </span>
-  <p class="position-absolute middle middle__text">{{ msg }}</p>
+  <p class="position-absolute middle middle__text text-center">{{ msg }}</p>
 </template>
 
 <script lang="ts">
@@ -32,6 +32,10 @@ export default defineComponent({
   }
 }
 
+.z {
+  z-index: 100000000;
+}
+
 .pure-material-progress-circular {
   -webkit-appearance: none;
   -moz-appearance: none;

src/components/CircleProgress.vue

@@ -1,18 +1,29 @@
 <template>
-  <header class="my-3 bg-secondary mx-4 h-25 rounded-3"
-          style='background-image: url("https://i.imgur.com/2YhIVkZ.webp");
-          background-size: cover;
+  <header ref="header"
+          class="lozad my-3 bg-secondary mx-4 h-25 rounded-3"
+          data-background-image="https://i.imgur.com/2YhIVkZ.webp"
+          style='background-size: cover;
           background-position: center;'>
   </header>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, onMounted, ref} from 'vue';
+import lozad from 'lozad'
 
 export default defineComponent({
   name: 'Header',
   setup() {
-    return
+    const header = ref({} as HTMLHeadElement)
+
+    onMounted(() => {
+      const observer = lozad(header.value);
+      observer.observe();
+    })
+
+    return {
+      header
+    }
   }
 });
 </script>