插件地址:vue-lazyload
以下做一个最简答的示例:
<div >
<img src="" class="logo" v-lazy="imgLogo">
<div class="bg-company" v-lazy:background-image="imgIcon"></div>
</div>
<script src="../js/lib/"></script>
<script src="../js/lib/"></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;
}
(VueLazyload, {
preLoad: 1.3,
error: '../images/',
loading: '../images/',
attempt: 1
});
var vm = new Vue({
el: '#app',
data: {
imgLogo: '../images/',
imgIcon: '../images/'
}
});
具体可访问vue-lazyload的github地址:/hilongjw/vue-lazyload 来查看API。
值得注意的是,有必要将img的src属性先置为空字符串,并设置对应的样式,以免页面渲染时出现图片的默认边框。