这次给大家带来怎样使用基于vue的延迟加载插件vue-view-lazy，使用基于vue的延迟加载插件vue-view-lazy的注意事项有哪些，下面就是实战案例，一起来看一下。
目的：图片或者其他资源进入可视区域后加载
安装使用
直接下载dist目录下的vue-view-lazy.min.js使用
使用npm安装
直接使用
<p id="app">
<span v-view-lazy @model="handlemodel"></span>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
vue.use(vviewlazy.default,{});
new vue({
el:'#app',
data:{
msg:'数据'
},
methods:{
handlemodel(){
console.log('出现了');
},
},
})
</script>
npm:
$ npm install --save-dev vue-view-lazy
引入vue-view-lazy
.main文件
import vview from 'vue-view-lazy'
vue.use(vview,{
error:'../../static/images/loading.png',
loading:'../../static/images/loading.gif',
});
懒加载图片
.vue文件
<template>
<ul id='img'>
<li class="in" v-for="(item,i) in imgs" :key="i">
<img src="#" alt="图片" v-view-lazy="item.src">
</li>
</ul>
</template>
<script>
export default {
data () {
return {
msg: 'welcome to your vue.js app',
imgs:[
{src:'../../static/images/img1.jpg'},
{src:'../../static/images/img2.png'},
{src:'../../static/images/img2.jpg'},
{src:'../../static/images/img3.jpg'},
{src:'../../static/images/img4.jpg'},
{src:'../../static/images/img5.jpeg'},
]
}
},
mounted(){
},
}
</script>
<style scoped>
...
</style>
懒加载数据
.vue文件
<template>
<p>
<!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法-->
<!--v-view-lazy='method' 或 v-view-lazy='(e)=>method(e,...arg)'-->
<p class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="(e)=>getajaxcontent(e,v.msg)>
loading...
</p>
<p class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="getajaxcontent()">
loading...
</p>
</p>
</template>
<script>
export default {
data(){
return{
msg:[]
}
},
mounted(){
fetch('http://localhost:3000/test').then(res=>res.json()).then(res=>{
this.msg = res;
})
},
methods:{
getajaxcontent(event,msg){
event.innertext = msg
},
}
}
</script>
<style scoped>
.cnt {
/*background: #ececec;*/
height: 500px;
margin-bottom: 50px;
}
</style>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue中swiper
如何进行angular网络请求封装
以上就是怎样使用基于vue的延迟加载插件vue-view-lazy的详细内容。