700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue-lazyload图片懒加载实战

vue-lazyload图片懒加载实战

时间:2019-03-04 06:14:13

相关推荐

vue-lazyload图片懒加载实战

插件地址: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地址:/hilongjw/vue-lazyload 来查看API。

值得注意的是,有必要将img的src属性先置为空字符串,并设置对应的样式,以免页面渲染时出现图片的默认边框。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。