未加星标

基于Vue的延迟加载插件vue-view-lazy

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

基于vue的懒加载插件

目的:图片或者其他资源进入可视区域后加载
安装使用
直接下载dist目录下的vue-view-lazy.min.js使用
使用npm安装

直接使用

<div id="app">
<span v-view-lazy @model="handleModel"></span>
</div>
<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>
<div>
<!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法-->
<!--v-view-lazy='method' 或 v-view-lazy='(e)=>method(e,...arg)'-->
<div class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="(e)=>getAjaxContent(e,v.msg)">
loading...
</div>
<div class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="getAjaxContent()">
loading...
</div>
</div>
</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-lazyload图片延迟加载插件的实例讲解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Ajax数据
tags: gt,lt,view,vue,lazy,script,src,msg,div,images,static,loading,Vue,加载,npm
分页:12
转载请注明
本文标题:基于Vue的延迟加载插件vue-view-lazy
本站链接:https://www.codesec.net/view/576813.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(37)