bugfix: 图片加载问题
This commit is contained in:
@@ -45,14 +45,13 @@
|
||||
</div>
|
||||
<!-- 已加载完成的 sketch 显示实际图片 -->
|
||||
<img
|
||||
v-show="!pendingSketchIndexes.includes(index)"
|
||||
v-img-loading="getImageSrc(item, index)"
|
||||
@load="handleImageLoad(index)"
|
||||
/>
|
||||
<!-- 正在加载的 sketch 显示 loading gif overlay -->
|
||||
<div v-if="pendingSketchIndexes.includes(index)" class="loading-wrapper">
|
||||
<!-- <div v-if="pendingSketchIndexes.includes(index)" class="loading-wrapper">
|
||||
<img src="@/assets/images/sketch-loading.gif" alt="loading" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="type === 'url'">
|
||||
@@ -119,8 +118,7 @@
|
||||
// 存储每个图片的加载状态
|
||||
const loadedStatus = ref<boolean[]>([])
|
||||
|
||||
// 存储正在加载的 sketch 索引
|
||||
const pendingSketchIndexes = ref<number[]>([])
|
||||
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -138,7 +136,7 @@
|
||||
() => {
|
||||
// 当 sketchList 变化时,重置加载状态
|
||||
loadedStatus.value = new Array(combineSketchList.value.length).fill(false)
|
||||
pendingSketchIndexes.value = []
|
||||
// pendingSketchIndexes.value = []
|
||||
}
|
||||
)
|
||||
|
||||
@@ -210,12 +208,10 @@
|
||||
// 图片加载完成时触发
|
||||
const handleImageLoad = (index: number) => {
|
||||
loadedStatus.value[index] = true
|
||||
pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
|
||||
}
|
||||
|
||||
// 图片加载失败时触发
|
||||
const handleImageError = (index: number) => {
|
||||
pendingSketchIndexes.value = pendingSketchIndexes.value.filter((i) => i !== index)
|
||||
console.error(`Failed to load sketch at index ${index}`)
|
||||
}
|
||||
|
||||
@@ -272,9 +268,9 @@
|
||||
const handleLoadingSketch = (sketchIndex?: number) => {
|
||||
showLoading.value = true
|
||||
// 记录正在加载的 sketch 索引
|
||||
if (sketchIndex !== undefined) {
|
||||
pendingSketchIndexes.value.push(sketchIndex)
|
||||
}
|
||||
// if (sketchIndex !== undefined) {
|
||||
// pendingSketchIndexes.value.push(sketchIndex)
|
||||
// }
|
||||
}
|
||||
|
||||
const handleClickUrl = (item: { url: string; title: string }) => {
|
||||
|
||||
Reference in New Issue
Block a user