图片懒加载

nuxt.config.js

@@ -53,6 +53,7 @@ export default {
     '@/plugins/router',
     '@/plugins/axios',
     '@/plugins/element-ui',
+    { src: '@/plugins/vue-lazyload.js', ssr: false },
     {
       // 引入一个插件，这里的 ssr 表示使用服务端渲染
       src: 'plugins/vue-swiper.js',

package-lock.json

@@ -27,7 +27,8 @@
       },
       "devDependencies": {
         "sass": "^1.32.11",
-        "sass-loader": "^10.1.1"
+        "sass-loader": "^10.1.1",
+        "vue-lazyload": "^1.2.3"
       }
     },
     "node_modules/@babel/code-frame": {

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "sass": "^1.32.11",
-    "sass-loader": "^10.1.1"
+    "sass-loader": "^10.1.1",
+    "vue-lazyload": "^1.2.3"
   }
 }

plugins/vue-lazyload.js

+import Vue from 'vue'
+import VueLazyload from 'vue-lazyload'
+// or with options
+Vue.use(VueLazyload, {
+  preLoad: 1.3, // 预加载的宽高比
+  error: 'https://taoic.oss-cn-hangzhou.aliyuncs.com/static/images/product.jpg', // 图片加载失败时使用的图片源
+  loading: 'https://webapp-pub.ezijing.com/project_online_pc/edd/img_default.png', // 图片加载的路径
+  attempt: 1, // 尝试加载次数
+  throttleWait: 100, //加载时间快些，不然时间有点久
+  observer: true
+})