Heim > Web-Frontend > js-Tutorial > Einführung in das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

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

不言
Freigeben: 2018-07-04 11:54:18
Original
1983 Leute haben es durchsucht

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>
Nach dem Login kopieren

npm:

$ npm install --save-dev vue-view-lazy
Nach dem Login kopieren

Vue-View-Lazy einführen

.main-Datei

import vView from &#39;vue-view-lazy&#39;
Vue.use(vView,{
  error:&#39;../../static/images/loading.png&#39;,
  loading:&#39;../../static/images/loading.gif&#39;,
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage