溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
基于vue的懶加載插件
目的：圖片或者其他資源進入可視區域后加載
安裝使用
直接使用
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
