Heim > Artikel > Web-Frontend > So verwenden Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy
Dieses Mal zeige ich Ihnen, wie Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung des Vue-basierten Lazy-Loading-Plug-ins vue? Hier ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.
Zweck: Bilder oder andere Ressourcen laden, nachdem Sie den sichtbaren Bereich betreten haben
Installieren und verwenden
Laden Sie vue-view-lazy.min.js direkt im dist-Verzeichnis herunter und verwenden Sie
Verwenden Sie npm, um
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:'#app', data:{ msg:'数据' }, methods:{ handleModel(){ console.log('出现了'); }, }, }) </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='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>
Verzögertes Laden von Daten
.vue-Datei<template> <p> <!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法--> <!--v-view-lazy='method' 或 v-view-lazy='(e)=>method(e,...arg)'--> <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('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>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
So verwenden Sie Swiper in Vue
So kapseln Sie Angular-Netzwerkanfragen
Das obige ist der detaillierte Inhalt vonSo verwenden Sie 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!