parameter für Modelle eingeführt, Beschreibung aktualisiert

resources/js/Components/StyleSelector.vue

@@ -15,7 +15,7 @@
         class="style-item"
         @click="selectStyle(style)"
       >
-        <img :src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
+        <img :data-src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
         <div class="style-details">
           <h4>{{ style.title }}</h4>
           <p>{{ style.description }}</p>
@@ -27,7 +27,7 @@
 
 <script setup>
 import axios from 'axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 
 const styles = ref([]);
 
@@ -44,6 +44,24 @@ const fetchStyles = () => {
   axios.get('/api/styles')
     .then(response => {
       styles.value = response.data;
+      nextTick(() => {
+        const stylesList = document.querySelector('.styles-list');
+        const observer = new IntersectionObserver((entries, observer) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              const img = entry.target;
+              img.src = img.dataset.src;
+              observer.unobserve(img);
+            }
+          });
+        }, {
+          root: stylesList // Observe intersections relative to .styles-list
+        });
+
+        stylesList.querySelectorAll('.style-thumbnail').forEach(img => {
+          observer.observe(img);
+        });
+      });
     })
     .catch(error => {
       console.error('Error fetching styles:', error);