feat: 图片加载 Loading 封装

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,27 +107,28 @@
 
 <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} -->
+  <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'}
-      style={_picError ? 'height: 240px; width: 320px;' : ''}
         on:click={getInfoPics}
         onclick="globalModal.showModal()"
         on:keypress={() => {}}
+        on:load={handleImageLoad}
+        transition:fade={{ delay: 300, duration: 300 }}
       />
-    <!-- {/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={() => {}}
+        on:load={handleImageLoad}
+        transition:fade={{ delay: 500, duration: 300 }}
       />
       {#if $_config.card_showId}
         <div
@@ -123,6 +139,12 @@
           {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>
   <div class="card-body justify-between">
     <h2 class="card-title block text-lg">