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

这个插件未压缩版本只有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> <ul> <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_jb51.rar

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwdjz.html