vue.js,lazyload,vue,lazyload,vue,lazyload,2.0这个插件未压缩版本只有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] { /*your style here*/ } img[lazy=error] { /*your style here*/ }, img[lazy=loaded] { /*your style here*/ } /* or background-image */ .yourclass[lazy=loading] { /*your style here*/ } .yourclass[lazy=error] { /*your style here*/ }, .yourclass[lazy=loaded] { /*your style here*/ }</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_51zixue.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue.js,lazyload,vue,lazyload,vue,lazyload,2.0
|
