懒加载

Author: lumengxin

package-lock.json

@@ -17,6 +17,7 @@
     "fastclick": "^1.0.6",
     "jsonp": "^0.2.1",
     "vue": "^2.5.2",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

package.json

@@ -7,7 +7,8 @@
         <Slider>
           <div v-for="(item, index) in recommends" :key=index>
             <a href="javascript:;">
-              <img :src="item.picUrl" @load="loadImage" />
+              <!-- fastclick和scroll点击事件冲突：加类css属性 -->
+              <img :src="item.picUrl" @load="loadImage" class="needsclick" />
             </a>
           </div>
         </Slider>
@@ -18,7 +19,7 @@
         <ul>
           <li v-for="(item, index) in discList" :key=index class="item">
             <div class="icon">
-              <img :src="item.imgurl" alt="img" width="60" height="60" />
+              <img v-lazy="item.imgurl" alt="img" width="60" height="60" />
             </div>
             <div class="text">
               <h2 class="name" v-html="item.creator.name"></h2>

src/assets/image/logo1_200x200.png renamed to src/assets/image/logo1.png

@@ -7,9 +7,15 @@ import router from './router'
 import fastclick from 'fastclick'
 // assets 别名 src/assets
 import 'assets/stylus/index.styl'
+// vue第三方插件，懒加载
+import VueLazyLoad from 'vue-lazyload'
 
 fastclick.attach(document.body)
 
+Vue.use(VueLazyLoad, {
+  loading: require('assets/image/logo1.png')
+})
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */