Commit f0d86b10 authored by KesaubeEire's avatar KesaubeEire

revert: 回滚Loading图片封装.

parent db03e0f6
<script>
import { toast } from '@zerodevx/svelte-toast';
import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config } from '../stores';
import { fade } from 'svelte/transition';
/**父属性: 所有信息*/
export let info;
......@@ -30,20 +29,6 @@
// ------------------------
/**控制加载中状态*/
let isLoading = true;
function handleImageLoad() {
isLoading = false; // 图片加载完成后,隐藏加载中状态
}
const image = new Image();
image.src = cover;
image.onload = handleImageLoad;
image.onerror = picErrorHandler;
// ------------------------
/**处理后的TAG列表*/
let tags;
// NOTE: 这里记得要随着父属性响应式变化
......@@ -107,42 +92,35 @@
<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 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" />
<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}
</div>
{/if}
</figure>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment