vue-lazyload的使用

https://www.npmjs.com/package/vue-lazyload

首先我們先在npm上下載vue-lazyload的包

npm install vue-lazyload --save

　　然后我們在main.js里面import這個包，當然，單單這一個包是不夠的，還得其他的文件

import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'

　　然后我們配置vue-lazyload;

　　我是這樣寫的

Vue.use(VueLazyload, {
error: 'dist/error.png',//這個是請求失敗后顯示的圖片
loading: 'dist/loading.gif',//這個是加載的loading過渡效果
try: 2 // 這個是加載圖片數量
})

　　官方給出的具體配置api可以看下圖

然后在組件里寫法是

<template>
	<div id="rj">
		<ul id="container">
      		<li v-for="img in list">
        		<img v-lazy="img">
      		</li>
		</ul>
	</div>
</template>
<script>
 export default {
 	data () {
 		return {
			 list: [
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
		        'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb', 
	      	]
 		}
 	}
 }
</script>

　　這樣就可以在頁面里實現圖片懶加載效果了，當然，官方給出的寫法可能和我這個有點出入，但是木有關系啦。

還可以用css的寫法，但是沒試過，所以就不在這里講了，要是說錯了，丟人啊！

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style> 

　　這個是官方的寫法，有興趣的可以試試。