⚡ Improve image loading

Open-Webtoon-Reader · Jun 19, 2024 · eb5c305 · eb5c305
1 parent 68621c2
commit eb5c305
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -69,12 +69,16 @@
 
 @layer base {
     * {
-        @apply border-border;
+        @apply border-border select-none;
     }
     body {
         @apply bg-background text-foreground font-sans antialiased text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl;
     }
 
+    img{
+        @apply pointer-events-none;
+    }
+
     h1{
         @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
     }

diff --git a/components/webtoons/episodes/EpisodeItem.vue b/components/webtoons/episodes/EpisodeItem.vue
@@ -13,7 +13,7 @@ const {episode} = defineProps<{
 <template>
     <Collapsible>
         <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/episode/${episode.id}`)">
-            <NuxtImg :src="sumToImageUrl(episode.thumbnail)" loading="lazy" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
+            <NuxtImg :src="sumToImageUrl(episode.thumbnail)" loading="lazy" format="webp" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
             <div id="infos" class="flex items-center w-full justify-between pl-2 pr-4 h-20 sm:h-24 md:h-28 xl:h-32">
                 <div id="text-infos" class="flex flex-col w-full h-full justify-center">
                     <div class="flex flex-row justify-between items-center">

diff --git a/components/webtoons/webtoons/WebtoonItem.vue b/components/webtoons/webtoons/WebtoonItem.vue
@@ -28,7 +28,7 @@ onMounted(() => {
 
 <template>
     <div id="main" class="flex items-center cursor-pointer h-20 sm:h-24 md:h-28 xl:h-32" @click="navigateTo(`/webtoon/${webtoon.id}`)">
-        <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" class="aspect-square h-full"/>
+        <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" format="webp" class="aspect-square h-full"/>
         <div id="infos" class="flex items-center w-full justify-between pl-2 h-full">
             <div id="text-infos" class="flex flex-col justify-between gap-auto h-full py-1 sm:py-2">
                 <div class="flex flex-col gap-0 md:gap-1 lg:gap-2">

diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
@@ -52,7 +52,7 @@ onMounted(async() => {
     <div class="flex flex-col items-center w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
         <h3 class="m-2">{{ episodeInfos.title }}</h3>
         <div v-for="image of episodeImages.slice(0, maxIndex)" :key="episodeImages.indexOf(image)" class="w-full">
-            <NuxtImg v-if="episodeImages.indexOf(image) < maxIndex - 1" :src="sumToImageUrl(image)" alt="Episode Image" class="w-full"/>
+            <NuxtImg v-if="episodeImages.indexOf(image) < maxIndex - 1" :src="sumToImageUrl(image)" format="webp" loading="lazy" alt="Episode Image" class="w-full"/>
             <VisibilityObserver v-else @on-display="increaseMaxIndex">
                 <NuxtImg :src="sumToImageUrl(image)" alt="Episode Image" class=""/>
             </VisibilityObserver>