Einführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

In diesem Artikel wird hauptsächlich das auf Vue basierende Lazy-Loading-Plugin vorgestellt, mit dem Bilder oder andere Ressourcen nach dem Betreten des sichtbaren Bereichs geladen werden können es als Referenz.

Lazy Loading Plug-in basierend auf Vue

Zweck: Bilder oder andere Ressourcen laden, nachdem der sichtbare Bereich betreten wurde

Installieren und verwenden Sie

1. Laden Sie vue-view-lazy.min.js direkt im dist-Verzeichnis herunter und verwenden Sie es

2. Npm zum Installieren verwenden
   

Direkt verwenden

<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

Vue-View-Lazy einführen

.main-Datei

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

Verzögertes Laden von Bildern

.vue-Datei

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

Verzögertes Laden von Daten

.vue-Datei

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

Die Oben finden Sie den gesamten Inhalt dieses Artikels. Ich hoffe, er wird für Sie nützlich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Methode zur Implementierung der Berechtigungssteuerung auf Tastenebene basierend auf benutzerdefinierten Vue-Anweisungen

Einführung in die Vue-Komponente Name

Das obige ist der detaillierte Inhalt vonEinführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!