懒加载

2023-07-27 19:05:24 +08:00 · 2023-07-27 19:05:24 +08:00 · 81fbcd6b6e
commit 81fbcd6b6e
parent ff5f842595
6 changed files with 84 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -16,6 +16,7 @@
        "vue": "^3.2.13",
        "vue-meta": "^3.0.0-alpha.2",
        "vue-router": "^4.0.3",
+        "vue3-lazyload": "^0.3.6",
        "vuex": "^4.0.0"
      },
      "devDependencies": {
@ -9893,6 +9894,48 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
+    "node_modules/vue3-lazyload": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.6.tgz",
+      "integrity": "sha512-UcVnEN9JzxeFBa7nNAPWKXHTtvVAzWYhBSvRU+Gmx9MdTGLWKwjZiNSyB1Os25jr9HaFHWY0DaU8uugXkGu9Gw==",
+      "dependencies": {
+        "vue-demi": "^0.12.5"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue3-lazyload/node_modules/vue-demi": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
+      "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/vuex": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
@ -17719,6 +17762,22 @@
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
      "dev": true
    },
+    "vue3-lazyload": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.6.tgz",
+      "integrity": "sha512-UcVnEN9JzxeFBa7nNAPWKXHTtvVAzWYhBSvRU+Gmx9MdTGLWKwjZiNSyB1Os25jr9HaFHWY0DaU8uugXkGu9Gw==",
+      "requires": {
+        "vue-demi": "^0.12.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.12.5",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
+          "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
+          "requires": {}
+        }
+      }
+    },
    "vuex": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "vue": "^3.2.13",
    "vue-meta": "^3.0.0-alpha.2",
    "vue-router": "^4.0.3",
+    "vue3-lazyload": "^0.3.6",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@ -1,6 +1,6 @@
 <template>
    <div class="item flexflex" @click="goapArtmentDetails">
-        <img class="img" :src="item['image']">
+        <img class="img" v-lazy="item['image']">
        <div class="title">{{ item['title'] }}</div>
        <div class="hint">{{ item['propaganda'] }}</div>
        <div class="tab-box flexflex" v-if="item['tags']">
--- a/src/main.js
+++ b/src/main.js
@ -33,6 +33,10 @@ import 'element-plus/theme-chalk/index.css'
 import locale from 'element-plus/lib/locale/lang/zh-cn';

 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+import lazyPlugin from 'vue3-lazyload'
+
+
 // import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import api from "./utils/api";

@ -76,6 +80,9 @@ app.use(ElMessage)
 app.use(ElBreadcrumb)
 app.use(ElAffix)

+app.use(lazyPlugin)
+
+
 app.use(store).use(router).use(Axios).mount('#app')
 // app.use(store).use(router).use(Axios).use(ElementPlus, {
 //   locale: zhCn
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@ -247,7 +247,7 @@
                        <img class="icon" src="@/assets/img/apartmentDetail/live.png">
                        品牌介绍
                    </div>
-                    <img class="company-img flexflex" :src="company['imageurl']">
+                    <img class="company-img flexflex" v-lazy="company['imageurl']">
                    <div class="text" v-html="company['introduction']"></div>
                </div>

@ -295,8 +295,7 @@
                <div class="same-brand-list" v-if="dualBrandList.length != 0">
                    <div class="same-brand-item" v-for="item in dualBrandList" @click="gobrand(item)">
                        <div class="same-brand-header">
-                            <img class="same-brand-img"
-                                src="https://axure-file.lanhuapp.com/md5__27da7a1a511d30b97b139f58626415e5.svg" />
+                            <img class="same-brand-img" v-lazy="item['image']" />
                            <div class="apartment-name">{{ item['title'] }}</div>
                            <div class="apartment-synopsis ellipsis">{{ item['propaganda'] }}</div>
                        </div>
@ -379,6 +378,7 @@ import viewMap from '@/components/public/viewMap.vue'
 import transmitBtn from '@/components/public/transmitBtn.vue'
 import backToTop from '@/components/public/backToTop.vue'
 import imageWatch from '@/components/detail/imageWatch.vue';
+
 import { useRouter, useRoute } from 'vue-router'
 let router = useRouter()

--- a/yarn.lock
+++ b/yarn.lock
@ -5770,6 +5770,11 @@
  "resolved" "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.5.tgz"
  "version" "0.14.5"

+"vue-demi@^0.12.5":
+  "integrity" "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q=="
+  "resolved" "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz"
+  "version" "0.12.5"
+
 "vue-hot-reload-api@^2.3.0":
  "integrity" "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
  "resolved" "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
@ -5809,7 +5814,7 @@
  "resolved" "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
  "version" "1.9.1"

-"vue@*", "vue@^2 || ^3.2.13", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.13", "vue@3.3.4":
+"vue@*", "vue@^2 || ^3.2.13", "vue@^2.0.0 || >=3.0.0", "vue@^3.0.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.13", "vue@3.3.4":
  "integrity" "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw=="
  "resolved" "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz"
  "version" "3.3.4"
@ -5820,6 +5825,13 @@
    "@vue/server-renderer" "3.3.4"
    "@vue/shared" "3.3.4"

+"vue3-lazyload@^0.3.6":
+  "integrity" "sha512-UcVnEN9JzxeFBa7nNAPWKXHTtvVAzWYhBSvRU+Gmx9MdTGLWKwjZiNSyB1Os25jr9HaFHWY0DaU8uugXkGu9Gw=="
+  "resolved" "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.6.tgz"
+  "version" "0.3.6"
+  dependencies:
+    "vue-demi" "^0.12.5"
+
 "vuex@^4.0.0":
  "integrity" "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ=="
  "resolved" "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz"