feat: image processing improve

frontend/spa/src/components/ProductImageSwiper.vue

@@ -1,28 +1,36 @@
 <template>
   <Swiper
-      :lazy="true"
       :modules="modules"
       :pagination="pagination"
+      :virtual="virtual"
       @sliderMove="hapticScroll"
       class="radius-box"
   >
     <SwiperSlide
-        v-for="image in images"
+        v-for="(image, index) in images"
         :key="image.url"
+        :virtualIndex="index"
     >
       <img
           :src="image.url"
-          :alt="image.alt"
           loading="lazy"
+          :alt="image.alt"
           class="w-full h-full radius-box"
+          @load="onLoad(image.url)"
+          @error="onLoad(image.url)"
       />
+      <div v-if="!loaded[image.url]" class="swiper-lazy-preloader"></div>
     </SwiperSlide>
   </Swiper>
 </template>
 
 <script setup>
+import {ref} from 'vue';
 import {Swiper, SwiperSlide} from 'swiper/vue';
+import {Pagination, Virtual} from 'swiper/modules';
 import {useHapticScroll} from "@/composables/useHapticScroll.js";
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 const props = defineProps({
   images: {
@@ -31,12 +39,22 @@ const props = defineProps({
   },
 });
 
-const modules = [];
+const modules = [Pagination, Virtual];
 const hapticScroll = useHapticScroll();
 const pagination = {
   clickable: true,
   dynamicBullets: false,
 };
+const virtual = {
+  enabled: true,
+  addSlidesAfter: 1,
+  addSlidesBefore: 0,
+};
+
+const loaded = ref({});
+const onLoad = (url) => {
+  if (url) loaded.value[url] = true;
+};
 </script>
 
 <style scoped>