1.vue-lazyload在npm上面的網址https://www.npmjs.com/package/vue-lazyload
2.安裝,在vue-cli中安裝
npm install vue-lazyload -D
3.在HTML中安裝
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
4.在vue-cli中的使用
在main.js中配置
import VueLazyload from 'vue-lazyload'
//使用懶加載組件
Vue.use(VueLazyload,{
error: require('./assets/img/404nofind.jpg'),//當加載圖片失敗的時候
loading: require('./assets/img/loading.png'),//當加載圖片成功的時候
preLoad:1
})
一些配置的參數
5.在需要的組件中使用
5.1v-lazy
<ul>
<li v-for="(img,a) in list" :key=a>
<img v-lazy="img.name" class="imgs">
</li>
</ul>
data(){
return{
list:[
{name:require('../assets/imgs/01.jpg')},
{name:require('../assets/imgs/02.jpg')},
{name:require('../assets/imgs/03.jpg')},
{name:require('../assets/imgs/04.jpg')},
{name:require('../assets/imgs/05.jpg')},
{name:require('../assets/imgs/06.jpg')},
{name:require('../assets/imgs/07.jpg')},
{name:require('../assets/imgs/08.jpg')},
{name:require('../assets/imgs/09.jpg')},
{name:require('../assets/imgs/010.jpg')},
]
}
},
5.2v-lazy-container
<div v-lazy-container="{ selector: 'img',error: '../img/404nofind.3b1631e5.jpg', loading: 'loading.1b74fda3.png' }">
<img data-src="../img/01.69e840f9.jpg" class="imgs">//data-src裏面的地址是真實的地址,就是build之後在dist文件夾中的img裏面的地址
<img data-src="../img/02.34ef1dfb.jpg" class="imgs">
<img data-src="../img/03.16b6bc13.jpg" class="imgs">
<img data-src="../img/04.cdbc3207.jpg" class="imgs">
<img data-src="../img/05.a4e25273.jpg" class="imgs">
<img data-src="../img/06.3183ae03.jpg" class="imgs">
<img data-src="../img/07.c0057596.jpg" class="imgs">
<img data-src="../img/08.affc19be.jpg" class="imgs">
<img data-src="../img/09.5c1d89c0.jpg" class="imgs">
</div>