Cette fois, je vais vous montrer comment utiliser le plug-in de chargement paresseux basé sur Vue vue-view-lazy Quelles sont les précautions pour l'utilisation du plug-in de chargement paresseux basé sur Vue vue-. view-lazy. Voici le combat réel. Jetons un coup d'œil au cas.
Objectif : Charger des images ou d'autres ressources après être entré dans la zone visible
Installer et utiliser
Téléchargez directement vue-view-lazy.min.js dans le répertoire dist et utilisez
Utilisez npm pour installer
Utiliser 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:'#app', data:{ msg:'数据' }, methods:{ handleModel(){ console.log('出现了'); }, }, }) </script>
npm:
$ npm install --save-dev vue-view-lazy
Introduire vue-view-lazy
.main fichier
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='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>
Chargement paresseux des données
.fichier vue
<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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Comment utiliser swiper dans vue
Comment encapsuler les requêtes réseau angulaires
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!