vue-lazyload插件github地址：https://github.com/hilongjw/vue-lazyload#requirements
效果是默認不加載圖片，先用一個占位符圖來代替找前，等使用圖片的時再進行加載（比如滾動到圖片的時候）罗售，如果真正的圖片請求出錯了，用默認的出錯圖片來進行占位
一奖恰、安裝插件
$ npm install vue-lazyload --save
二吊趾、配置
//main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('@/assets/img/dou_dou.jpg'), //請求失敗后顯示的圖片
loading: require('@/assets/img/dou_dou.jpg'), //加載的loading過渡圖片
attempt: 1 // 加載圖片數(shù)量
})
具體配置api
20170525142423153.png
三宛裕、html/js
<template>
<div>
<ul id="container">
<li v-for="img in list">
<img v-lazy="img">
</li>
</ul>
</div>
</template>
// 重點:把之前項目中img 標簽里面的 :src 屬性 改成 v-lazy
<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>
四、事件監(jiān)聽
可以通過傳遞數(shù)組來配置想要使用vue - lazyload的事件監(jiān)聽器的名字论泛。
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
})
