diff --git a/package.json b/package.json
index f2cd289..4ebe340 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"sortablejs": "^1.15.1",
"vue": "^3.3.8",
"vue-draggable-plus": "^0.3.5",
+ "vue-lazyload": "^3.0.0",
"vue-mousetrap": "^1.0.5",
"vue-router": "^4.1.6",
"vue-types": "^4.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3dde4d4..e1125a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ dependencies:
vue-draggable-plus:
specifier: ^0.3.5
version: 0.3.5(@types/sortablejs@1.15.7)
+ vue-lazyload:
+ specifier: ^3.0.0
+ version: 3.0.0
vue-mousetrap:
specifier: ^1.0.5
version: 1.0.5
@@ -7320,6 +7323,10 @@ packages:
- supports-color
dev: true
+ /vue-lazyload@3.0.0:
+ resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==}
+ dev: false
+
/vue-mousetrap@1.0.5:
resolution: {integrity: sha512-mDyPBBTnOrpUNDZ4vjd7X8emYwKFG2/Rsi5coZKDmF+dM5XpENrnvdmef4xHq2gcZ1HVmHqeI5jQP17p9fFpzA==}
dependencies:
diff --git a/src/main.ts b/src/main.ts
index a146104..82bead9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,9 @@ import router, { setupRouter } from './router'
import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
import { setupStore } from '@/store'
import 'virtual:svg-icons-register'
+import VueLazyload from 'vue-lazyload'
+import bgPng from '@/assets/images/bg-loading.png'
+import closePng from '@/assets/images/close.png'
async function bootstrap() {
const app = createApp(App)
@@ -19,6 +22,12 @@ async function bootstrap() {
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
+ app.use(VueLazyload, {
+ preLoad: 1.3,
+ error: closePng,
+ loading: bgPng,
+ attempt: 1
+ })
app.mount('#app', true)
}
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 219eec4..7e6f6ea 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -719,7 +719,12 @@ defineExpose({
:preview-src="item.imgUrl"
:src="item.thumburl"
:fallback-src="bgLoadingImg"
+ style="display: none"
/>
+
![]()