ソースを参照

资源列表、技能列表、咨询列表H5图片懒加载;

huan-jie 4 年 前
コミット
d16298577c

+ 1 - 1
assets/css/work_down/index.scss

@@ -17,7 +17,7 @@
             .add-works-btn {
                 position: absolute;
                 right: 20px;
-                width: 96px;
+                width: 120px;
                 height: 32px;
                 padding: 0;
                 border: none;

+ 7 - 1
nuxt.config.js

@@ -56,7 +56,9 @@ module.exports = {
         minSize: 30000,
         maxSize: 1000000
       }
-    }
+    },
+    publicPath: process.env.NODE_ENV === 'production' ? 'https://stacdn.proginn.com/_nuxt/' : '/_nuxt/',
+    // publicPath: 'https://stacdn.proginn.com/_nuxt/'
   },
   hooks: {
     // This hook is called before rendering the html to the browser
@@ -166,6 +168,10 @@ module.exports = {
     {
       src: "plugins/g2.js",
       ssr: false
+    },
+    {
+      src: 'plugins/vueLazyLoad',
+      ssr: false
     }
   ],
   /*

+ 1 - 0
package.json

@@ -75,6 +75,7 @@
     "style-loader": "^0.23.1",
     "t2css": "^0.1.6",
     "ts-loader": "^8.0.3",
+    "vue-lazyload": "^1.3.3",
     "webpack": "^4.43.0"
   },
   "resolutions": {

+ 1 - 1
pages/frontend/consult/list.vue

@@ -162,7 +162,7 @@
                         :key="item.uid"
                         @click="handleClickConsultItem(item.uid)">
                         <div class="owner-content">
-                            <img class="avatar" style="border-radius:50% !important;" :src="item.avatar" alt="avatar">
+                            <img class="avatar" style="border-radius:50% !important;" v-lazy="item.avatar" alt="avatar">
                             <div class="owner-info">
                                 <div class="nickname">{{ item.nickname }}</div>
                                 <div class="company">{{ item.company }} {{ item.title }}</div>

+ 2 - 2
pages/frontend/skill/list.vue

@@ -152,9 +152,9 @@
                         v-for="item in skillList"
                         :key="item.sale_id"
                         @click="handleClickSkillItem(item.sale_id)">
-                        <img class="cover" :src="item.coverImage" alt="skillCover,cover">
+                        <img class="cover" v-lazy="item.coverImage" alt="skillCover,cover">
                         <div class="owner-wrapper">
-                            <img class="avatar" :src="item.user.icon_url" alt="avatar">
+                            <img class="avatar" v-lazy="item.user.icon_url" alt="avatar">
                             <div class="nickname">{{ item.user.nickname }}</div>
                         </div>
                         <div class="title">{{ item.title }}</div>

+ 2 - 2
pages/work_down/index.vue

@@ -19,7 +19,7 @@
                         :href="`/works/${category.f_name}/`">
                         {{ category.name }}
                     </a>
-                    <el-button class="add-works-btn" @click="handleClickCreate">添加资源赚钱</el-button>
+                    <el-button class="add-works-btn" @click="handleClickCreate">上传资源,快速赚钱</el-button>
                 </div>
                 <div class="works-category-two">
                     <!-- 展开按钮 -->
@@ -179,7 +179,7 @@
                         v-for="works in worksList"
                         :key="`works-item-${works.wid}`"
                         @click="handleClickWorkItem(works.wid)">
-                        <img v-if="works.image" class="works-image" :src="works.image" alt="works-image">
+                        <img v-if="works.image" class="works-image" v-lazy="works.image" alt="works-image">
                         <div class="works-detail" :class="works.image ? '' : 'without-img'">
                             <div class="works-name">{{ works.name }}</div>
                             <div class="works-description">{{ works.description }}</div>

+ 9 - 0
plugins/vueLazyLoad.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import VueLazyLoad from 'vue-lazyload'
+
+Vue.use(VueLazyLoad, {
+    preLoad: 1.33, // 预加载的宽高比,4:3
+    error: '', // 加载失败时使用的图片
+    loading: '', // 加载时的loading图
+    attempt: 2 //尝试加载次数
+})

+ 1 - 1
yarn.lock

@@ -10454,7 +10454,7 @@ vue-lazyload@1.2.3:
   version "1.2.3"
   resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
 
-vue-lazyload@^1.0.1:
+vue-lazyload@^1.0.1, vue-lazyload@^1.3.3:
   version "1.3.3"
   resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz#4df50a271bde9b74c3caf7a228d6e0af50d5682f"