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

站长资源 2024/11/27 佚名

2 0 1

基于vue的懒加载插件

目的：图片或者其他资源进入可视区域后加载

安装使用

直接下载dist目录下的vue-view-lazy.min.js使用
使用npm安装

直接使用

<div id="app">
  <span v-view-lazy @model="handleModel"></span>
</div>
<script src="/UploadFiles/2021-04-02/vue.js">

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="/UploadFiles/2021-04-02/#">

懒加载数据


.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>




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。