王阳明名言,周立波为什么坐牢,焦守成
这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0
安转
$ npm install vue-lazyload --save
使用方法
//main.js import vue from 'vue' // import vuelazyload import vuelazyload from 'vue-lazyload' //use custom directive vue.use(vuelazyload) // use options vue.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+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论