插件地址:vue-lazyload
以下做一個最簡答的示例:
<div id="app">
<img src="" class="logo" v-lazy="imgLogo">
<div class="bg-company" v-lazy:background-image="imgIcon"></div>
</div>
<script src="../js/lib/vue.js"></script>
<script src="../js/lib/vue-lazyload.js"></script>
img{
border: none;
}
img[src=""]{
opacity: 0;
}
.logo{
width: 0.5rem;
height: 0.2rem;
}
.bg-company{
width: 0.2rem;
height: 0.19rem;
background-repeat: no-repeat;
background-size: cover;
}
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../images/error.png',
loading: '../images/avatar.jpg',
attempt: 1
});
var vm = new Vue({
el: '#app',
data: {
imgLogo: '../images/logo.png',
imgIcon: '../images/icon.png'
}
});
具體可訪問vue-lazyload的github地址:https://github.com/hilongjw/vue-lazyload 來查看API。
值得注意的是,有必要將img的src屬性先置爲空字符串,並設置對應的樣式,以免頁面渲染時出現圖片的默認邊框。