Introduction au plug-in de chargement différé basé sur Vue vue-view-lazy

Cet article présente principalement le plug-in de chargement paresseux vue-view-lazy basé sur Vue, qui peut charger des images ou d'autres ressources après être entré dans la zone visible. Le contenu est assez bon. Je vais le partager avec vous maintenant et vous le donner. cela comme référence.

Plug-in de chargement paresseux basé sur vue

Objectif : Charger des images ou d'autres ressources après être entré dans la zone visible

Installez et utilisez

1. Téléchargez directement vue-view-lazy.min.js dans le répertoire dist et utilisez-le

2. Utilisez npm pour installer
   

Utilisez directement

<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:&#39;#app&#39;,
    data:{
      msg:&#39;数据&#39;
    },
    methods:{
      handleModel(){
        console.log(&#39;出现了&#39;);
      },
    },
  })
</script>

npm :

$ npm install --save-dev vue-view-lazy

Présentation de vue-view-lazy

. fichier principal

import vView from 'vue-view-lazy'
Vue.use(vView,{
  error:'../../static/images/loading.png',
  loading:'../../static/images/loading.gif',
});

Chargement paresseux des images

fichier .vue

<template>
  <ul id=&#39;img&#39;>
    <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: &#39;Welcome to Your Vue.js App&#39;,
        imgs:[
          {src:&#39;../../static/images/img1.jpg&#39;},
          {src:&#39;../../static/images/img2.png&#39;},
          {src:&#39;../../static/images/img2.jpg&#39;},
          {src:&#39;../../static/images/img3.jpg&#39;},
          {src:&#39;../../static/images/img4.jpg&#39;},
          {src:&#39;../../static/images/img5.jpeg&#39;}, 
        ]
      }
    },
    mounted(){
    },
  }
</script>
<style scoped>
  ...
</style>

Chargement paresseux des données

fichier .vue

<template>
  <p>
    <!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法-->
    <!--v-view-lazy=&#39;method&#39; 或 v-view-lazy=&#39;(e)=>method(e,...arg)&#39;-->
    <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(&#39;http://localhost:3000/test&#39;).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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode pour implémenter le contrôle des autorisations au niveau des boutons basé sur les instructions personnalisées de Vue

Introduction au composant Vue nom

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!