added preloading to some images to reduce the CLS

TUM-Dev · Apr 11, 2024 · 4491d24 · 4491d24
1 parent a910695
commit 4491d24
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/webclient/components/DetailsInfoSection.vue b/webclient/components/DetailsInfoSection.vue
@@ -29,6 +29,8 @@ const runtimeConfig = useRuntimeConfig();
           :alt="t('image_alt')"
           :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${shownImage.name}`"
           class="bg-zinc-100 block h-auto w-full max-w-full rounded-t-lg"
+          preload
+          placeholder
         />
       </button>
       <div class="px-5 py-3">

diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
@@ -137,6 +137,7 @@ onMounted(() => {
         :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${data.imgs[0].name}`"
         densities="x1 x2 x3 x4"
         class="block w-full"
+        preload
         placeholder
       />
     </button>