这个插件未压缩版本只有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-lazyloadz_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。