vue-lazyload图片懒加载
1.代码:<div id="main"><template><div><ul id="container"><li v-for="img in list"><img v-lazy="img"></li></ul>
·
1.代码:
<div id="main">
<template>
<div>
<ul id="container">
<li v-for="img in list">
<img v-lazy="img">
</li>
</ul>
</div>
</template>
</div>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: '#main',
data:{
list: [
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
]
}
})
</script>
2.配置vue-lazyload
Vue.use(VueLazyload, {
error: 'static/error.png',//这个是请求失败后显示的图片
loading: 'static/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})
地址:
http://blog.csdn.net/longzhoufeng/article/details/72726104
github地址:https://github.com/hilongjw/vue-lazyload 来查看API
更多推荐
已为社区贡献2条内容
所有评论(0)