相思资源网 Design By www.200059.com
这个插件未压缩版本只有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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无分享一个精简的vue.js 图片lazyload插件实例的评论...