分享一个精简的vue.js 图片lazyload插件实例

时间:2021-05-25

这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0

安转

$ npm install vue-lazyload --save

使用方法

//main.jsimport Vue from 'vue'// import VueLazyloadimport VueLazyload from 'vue-lazyload'//use custom directiveVue.use(VueLazyload)// use optionsVue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1})new Vue({ el: 'body',})<!--your.vue--><script>export default { data () { return { list: [ 'your_images_url', 'your_images_url', // you can customer any image's placeholder while loading or load failed { src: 'your_images_url.png', error: 'another-error.png', loading: 'another-loading-spin.svg' } ] } }}</script><template> <div class="img-list"> <ul id="container"> <li v-for="img in list"> <img v-lazy="img"> </li> </ul> </div></template>

这里可以定制所有加载中和加载失败加载成功的样式,

<style> img[lazy=loading] { } img[lazy=error] { }, img[lazy=loaded] { } .yourclass[lazy=loading] { } .yourclass[lazy=error] { }, .yourclass[lazy=loaded] { }</style>

API

Options

params type detail preLoad Number proportion of pre-loading height error String error img src loading String loading img src attempt Number attempts count

demo下载地址:vue-lazyloadz_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章