Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
R
rrpgLink_FrontEnd
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kesaubeeire
rrpgLink_FrontEnd
Commits
f0d86b10
Commit
f0d86b10
authored
Oct 28, 2023
by
KesaubeEire
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
revert: 回滚Loading图片封装.
parent
db03e0f6
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
29 additions
and
51 deletions
+29
-51
src/components/card.svelte
src/components/card.svelte
+29
-51
No files found.
src/components/card.svelte
View file @
f0d86b10
<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,28 +92,27 @@
<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}
<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={() => {}}
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
...
...
@@ -139,12 +123,6 @@
{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">
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment