基于Vue的延遲加載插件vue-view-lazy

更新時間：2018年05月21日 14:47:36 作者：GluTtoNy

這篇文章主要介紹了基于Vue的延遲加載插件vue-view-lazy，可以使圖片或者其他資源進(jìn)入可視區(qū)域后加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

基于vue的懶加載插件

目的：圖片或者其他資源進(jìn)入可視區(qū)域后加載

安裝使用

直接下載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:'數(shù)據(jù)'
    },
    methods:{
      handleModel(){
        console.log('出現(xiàn)了');
      },
    },
  })
</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>

懶加載數(shù)據(jù)

.vue文件

<template>
  <div>
    <!--@model自定義事件是在該dom在第一次出現(xiàn)在視口內(nèi)時觸發(fā)的方法-->
    <!--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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: