feat: 图片加载 Loading 封装

README.md

@@ -80,8 +80,8 @@ npm run build:prod
   - [x] 展示基础卡片
     - [x] 图片
     - [x] 点击 Cover 预览所有图片
-    - [x]  懒加载 -> 有瀑布流后大概可以不需要懒加载了？
-    - [x]  图片高度统一
+    - [x] 懒加载 -> 有瀑布流后大概可以不需要懒加载了？
+    - [x] 图片高度统一
     - [x] 语言
   - [x] TAG
     - [x] 展示

src/components/AwaitImage.svelte

 <script>
   import { fade } from 'svelte/transition';
 
-  export let imageUrl = ''; // 用于接收图片URL
-  let isLoading = true; // 控制加载中状态
+  /**接收图片URL*/
+  export let src = '';
+
+  /**接收class (tailwind)*/
+  export let _class = '';
+
+  /**控制加载中状态*/
+  let isLoading = true;
 
   function handleImageLoad() {
     isLoading = false; // 图片加载完成后，隐藏加载中状态
   }
 
   const image = new Image();
-  image.src = imageUrl;
+  image.src = src;
   image.onload = handleImageLoad;
 </script>
 
 {#if isLoading}
   <!-- 显示加载中状态 -->
-  <div class="w-full flex justify-center items-center" transition:fade={{ delay: 0, duration: 300 }}>
+  <div class="w-full h-full flex justify-center items-center" transition:fade={{ delay: 0, duration: 200 }}>
     <span class="loading loading-infinity loading-lg" />
   </div>
 {:else}
   <!-- 显示加载完成后的图片 -->
-  <img src={imageUrl} alt={imageUrl} on:load={handleImageLoad} transition:fade={{ delay: 500, duration: 300 }} />
+  <img {...$$restProps} class:_class {src} alt={src} on:load={handleImageLoad} transition:fade={{ delay: 200, duration: 300 }} />
 {/if}

src/components/MedalItemDetail.svelte

@@ -15,7 +15,7 @@
   {#each pics as pic, index}
     <a href={'#' + pic + index} class="w-16 h-16 btn btn-xs flex flex-col">
       <div class="w-10 h-10 flex items-center">
-        <AwaitImage imageUrl={pic} />
+        <AwaitImage src={pic} />
       </div>
       <div>{index}</div>
     </a>

src/components/card.svelte

 <script>
   import { toast } from '@zerodevx/svelte-toast';
   import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config } from '../stores';
+  import { fade } from 'svelte/transition';
 
   /**父属性: 所有信息*/
   export let info;
@@ -29,6 +30,20 @@
 
   // ------------------------
 
+  /**控制加载中状态*/
+  let isLoading = true;
+
+  function handleImageLoad() {
+    isLoading = false; // 图片加载完成后，隐藏加载中状态
+  }
+
+  const image = new Image();
+  image.src = cover;
+  image.onload = handleImageLoad;
+  image.onerror = picErrorHandler;
+
+  // ------------------------
+
   /**处理后的TAG列表*/
   let tags;
   // NOTE: 这里记得要随着父属性响应式变化
@@ -92,35 +107,42 @@
 
 <div class="card w-80 bg-primary text-primary-content shadow-xl overflow-hidden">
   <!-- NOTE: Cover -->
-  <figure class="w-80 h-60 relative bg-neutral">
-    <!-- {#if !_picError} -->
-    <img
-      class="w-80 h-60 object-cover blur-lg"
-      src={cover ?? '/favicon.ico'}
-      alt={title ?? 'default alt'}
-      style={_picError ? 'height: 240px; width: 320px;' : ''}
-      on:click={getInfoPics}
-      onclick="globalModal.showModal()"
-      on:keypress={() => {}}
-    />
-    <!-- {/if} -->
-    <img
-      class="left-0 top-0 absolute w-80 h-60 object-contain border-neutral"
-      src={cover ?? '/favicon.ico'}
-      alt={title ?? 'default alt'}
-      style={_picError ? 'height: 240px; width: 320px;' : ''}
-      on:error={picErrorHandler}
-      on:click={getInfoPics}
-      onclick="globalModal.showModal()"
-      on:keypress={() => {}}
-    />
-    {#if $_config.card_showId}
-      <div
-        class="
-          absolute w-10 right-0 top-0 p-1 text-center
-          bg-neutral text-neutral-content rounded-bl-box border border-neutral"
-      >
-        {id}
+  <figure class="w-80 h-60 relative bg-neutral flex flex-col items-center">
+    {#if !isLoading || _picError}
+      <img
+        class="w-80 h-60 object-cover blur-lg"
+        src={cover ?? '/favicon.ico'}
+        alt={title ?? 'default alt'}
+        on:click={getInfoPics}
+        onclick="globalModal.showModal()"
+        on:keypress={() => {}}
+        on:load={handleImageLoad}
+        transition:fade={{ delay: 300, duration: 300 }}
+      />
+      <img
+        class="left-0 top-0 absolute w-80 h-60 object-contain border-neutral"
+        src={cover ?? '/favicon.ico'}
+        alt={title ?? 'default alt'}
+        on:error={picErrorHandler}
+        on:click={getInfoPics}
+        onclick="globalModal.showModal()"
+        on:keypress={() => {}}
+        on:load={handleImageLoad}
+        transition:fade={{ delay: 500, duration: 300 }}
+      />
+      {#if $_config.card_showId}
+        <div
+          class="
+              absolute w-10 right-0 top-0 p-1 text-center
+              bg-neutral text-neutral-content rounded-bl-box border border-neutral"
+        >
+          {id}
+        </div>
+      {/if}
+    {:else}
+      <!-- 显示加载中状态 -->
+      <div class="w-full flex justify-center items-center transition:fade={{ delay: 0, duration: 300 }}">
+        <span class="loading loading-infinity loading-lg text-neutral-content" />
       </div>
     {/if}
   </figure>