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
db03e0f6
Commit
db03e0f6
authored
Oct 27, 2023
by
KesaubeEire
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 图片加载 Loading 封装
parent
837f7e68
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
65 additions
and
37 deletions
+65
-37
README.md
README.md
+2
-2
src/components/AwaitImage.svelte
src/components/AwaitImage.svelte
+11
-5
src/components/MedalItemDetail.svelte
src/components/MedalItemDetail.svelte
+1
-1
src/components/card.svelte
src/components/card.svelte
+51
-29
No files found.
README.md
View file @
db03e0f6
...
@@ -80,8 +80,8 @@ npm run build:prod
...
@@ -80,8 +80,8 @@ npm run build:prod
-
[x] 展示基础卡片
-
[x] 展示基础卡片
-
[x] 图片
-
[x] 图片
-
[x] 点击 Cover 预览所有图片
-
[x] 点击 Cover 预览所有图片
-
[x]
懒加载 -> 有瀑布流后大概可以不需要懒加载了?
-
[x] 懒加载 -> 有瀑布流后大概可以不需要懒加载了?
-
[x]
图片高度统一
-
[x] 图片高度统一
-
[x] 语言
-
[x] 语言
-
[x] TAG
-
[x] TAG
-
[x] 展示
-
[x] 展示
...
...
src/components/AwaitImage.svelte
View file @
db03e0f6
<script>
<script>
import { fade } from 'svelte/transition';
import { fade } from 'svelte/transition';
export let imageUrl = ''; // 用于接收图片URL
/**接收图片URL*/
let isLoading = true; // 控制加载中状态
export let src = '';
/**接收class (tailwind)*/
export let _class = '';
/**控制加载中状态*/
let isLoading = true;
function handleImageLoad() {
function handleImageLoad() {
isLoading = false; // 图片加载完成后,隐藏加载中状态
isLoading = false; // 图片加载完成后,隐藏加载中状态
}
}
const image = new Image();
const image = new Image();
image.src =
imageUrl
;
image.src =
src
;
image.onload = handleImageLoad;
image.onload = handleImageLoad;
</script>
</script>
{#if isLoading}
{#if isLoading}
<!-- 显示加载中状态 -->
<!-- 显示加载中状态 -->
<div class="w-full
flex justify-center items-center" transition:fade={{ delay: 0, duration: 3
00 }}>
<div class="w-full
h-full flex justify-center items-center" transition:fade={{ delay: 0, duration: 2
00 }}>
<span class="loading loading-infinity loading-lg" />
<span class="loading loading-infinity loading-lg" />
</div>
</div>
{:else}
{:else}
<!-- 显示加载完成后的图片 -->
<!-- 显示加载完成后的图片 -->
<img
src={imageUrl} alt={imageUrl} on:load={handleImageLoad} transition:fade={{ delay: 5
00, duration: 300 }} />
<img
{...$$restProps} class:_class {src} alt={src} on:load={handleImageLoad} transition:fade={{ delay: 2
00, duration: 300 }} />
{/if}
{/if}
src/components/MedalItemDetail.svelte
View file @
db03e0f6
...
@@ -15,7 +15,7 @@
...
@@ -15,7 +15,7 @@
{#each pics as pic, index}
{#each pics as pic, index}
<a href={'#' + pic + index} class="w-16 h-16 btn btn-xs flex flex-col">
<a href={'#' + pic + index} class="w-16 h-16 btn btn-xs flex flex-col">
<div class="w-10 h-10 flex items-center">
<div class="w-10 h-10 flex items-center">
<AwaitImage
imageUrl
={pic} />
<AwaitImage
src
={pic} />
</div>
</div>
<div>{index}</div>
<div>{index}</div>
</a>
</a>
...
...
src/components/card.svelte
View file @
db03e0f6
<script>
<script>
import { toast } from '@zerodevx/svelte-toast';
import { toast } from '@zerodevx/svelte-toast';
import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config } from '../stores';
import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config } from '../stores';
import { fade } from 'svelte/transition';
/**父属性: 所有信息*/
/**父属性: 所有信息*/
export let info;
export let info;
...
@@ -29,6 +30,20 @@
...
@@ -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列表*/
/**处理后的TAG列表*/
let tags;
let tags;
// NOTE: 这里记得要随着父属性响应式变化
// NOTE: 这里记得要随着父属性响应式变化
...
@@ -92,35 +107,42 @@
...
@@ -92,35 +107,42 @@
<div class="card w-80 bg-primary text-primary-content shadow-xl overflow-hidden">
<div class="card w-80 bg-primary text-primary-content shadow-xl overflow-hidden">
<!-- NOTE: Cover -->
<!-- NOTE: Cover -->
<figure class="w-80 h-60 relative bg-neutral">
<figure class="w-80 h-60 relative bg-neutral flex flex-col items-center">
<!-- {#if !_picError} -->
{#if !isLoading || _picError}
<img
<img
class="w-80 h-60 object-cover blur-lg"
class="w-80 h-60 object-cover blur-lg"
src={cover ?? '/favicon.ico'}
src={cover ?? '/favicon.ico'}
alt={title ?? 'default alt'}
alt={title ?? 'default alt'}
style={_picError ? 'height: 240px; width: 320px;' : ''}
on:click={getInfoPics}
on:click={getInfoPics}
onclick="globalModal.showModal()"
onclick="globalModal.showModal()"
on:keypress={() => {}}
on:keypress={() => {}}
on:load={handleImageLoad}
/>
transition:fade={{ delay: 300, duration: 300 }}
<!-- {/if} -->
/>
<img
<img
class="left-0 top-0 absolute w-80 h-60 object-contain border-neutral"
class="left-0 top-0 absolute w-80 h-60 object-contain border-neutral"
src={cover ?? '/favicon.ico'}
src={cover ?? '/favicon.ico'}
alt={title ?? 'default alt'}
alt={title ?? 'default alt'}
style={_picError ? 'height: 240px; width: 320px;' : ''}
on:error={picErrorHandler}
on:error={picErrorHandler}
on:click={getInfoPics}
on:click={getInfoPics}
onclick="globalModal.showModal()"
onclick="globalModal.showModal()"
on:keypress={() => {}}
on:keypress={() => {}}
on:load={handleImageLoad}
/>
transition:fade={{ delay: 500, duration: 300 }}
{#if $_config.card_showId}
/>
<div
{#if $_config.card_showId}
class="
<div
absolute w-10 right-0 top-0 p-1 text-center
class="
bg-neutral text-neutral-content rounded-bl-box border border-neutral"
absolute w-10 right-0 top-0 p-1 text-center
>
bg-neutral text-neutral-content rounded-bl-box border border-neutral"
{id}
>
{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>
</div>
{/if}
{/if}
</figure>
</figure>
...
...
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