Home > Article > Web Front-end > How to use the Vue-based lazy loading plug-in vue-view-lazy
This time I will show you how to use the Vue-based delayed loading plug-in vue-view-lazy, and what are the precautions for using the Vue-based delayed loading plug-in vue-view-lazy. Here is the actual combat Let’s take a look at the case.
Purpose: Load pictures or other resources after entering the visible area
Install and use
Use directly
<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
Introduce vue-view-lazy
.main fileimport vView from 'vue-view-lazy' Vue.use(vView,{ error:'../../static/images/loading.png', loading:'../../static/images/loading.gif', });
Lazy loading of images
.vue file<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>
Lazy loading of data
.vue file<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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading: ##How to encapsulate Angular network requests
The above is the detailed content of How to use the Vue-based lazy loading plug-in vue-view-lazy. For more information, please follow other related articles on the PHP Chinese website!