perf: enable lazy loading for images list in file table

MegEngine · Oct 29, 2024 · 5e2dc60 · 5e2dc60
1 parent 37bae61
commit 5e2dc60
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/renderer/components/gallery/index.vue b/src/renderer/components/gallery/index.vue
@@ -52,7 +52,7 @@
                         </span>
                       </div>
                       <div class="content" flex="main:center cross:center">
-                        <img v-if="isImage(item)" v-lazy="getImageUrlSync(item)" name="dragItem" width="200px" height="130px" loading="lazy" />
+                        <img v-if="isImage(item)" v-lazy="getImageUrlSync(item)" name="dragItem" width="200px" height="130px" loading="lazy" decoding="async" />
                         <video v-if="isVideo(item)" v-lazy="getImageUrlSync(item)" name="dragItem" width="200px" height="130px" loading="lazy" />
                       </div>
                       <div class="name" :title="item">

diff --git a/src/renderer/views/image/ImagePreview.vue b/src/renderer/views/image/ImagePreview.vue
@@ -73,7 +73,7 @@
           :removeVuexItem="removeImages"
         >
           <template v-slot:default="slotProps">
-            <img :src="slotProps.src" style="object-fit: contain; width: 200px; height: 170px" />
+            <img v-lazy="slotProps.src" style="object-fit: contain; width: 200px; height: 170px" loading="lazy" decoding="async" />
           </template>
         </Thumbnail>
       </div>

diff --git a/src/renderer/views/video/VideoPreview.vue b/src/renderer/views/video/VideoPreview.vue
@@ -70,7 +70,7 @@
           :removeVuexItem="removeVideos"
         >
           <template v-slot:default="slotProps">
-            <video controls style="object-fit: contain; width: 200px; height: 120px" :src="slotProps.src"></video>
+            <video :src="slotProps.src" controls style="object-fit: contain; width: 200px; height: 120px" loading="lazy"></video>
           </template>
         </Thumbnail>
       </div>