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" /> +