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
- Directly download vue-view-lazy.min.js in the dist directory and use
- Use npm to install
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 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>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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
![Error loading plugin in Illustrator [Fixed]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Error loading plugin in Illustrator [Fixed]
Feb 19, 2024 pm 12:00 PM
When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator
Stremio subtitles not working; error loading subtitles
Feb 24, 2024 am 09:50 AM
Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like
PHP implements infinite scroll loading
Jun 22, 2023 am 08:30 AM
With the development of the Internet, more and more web pages need to support scrolling loading, and infinite scrolling loading is one of them. It allows the page to continuously load new content, allowing users to browse the web more smoothly. In this article, we will introduce how to implement infinite scroll loading using PHP. 1. What is infinite scroll loading? Infinite scroll loading is a method of loading web content based on scroll bars. Its principle is that when the user scrolls to the bottom of the page, background data is asynchronously retrieved through AJAX to continuously load new content. This kind of loading method
How to turn off the delay in Douyu live broadcast? -How to watch the replay of Douyu live broadcast?
Mar 18, 2024 am 10:55 AM
How to turn off the delay in Douyu live broadcast? 1. The user first clicks to enter Douyu Live, as shown in the picture. 2. Then the user clicks "Settings" in the "Douyu Live" window, as shown in the figure. 3. Then in the "Settings" window, click "Advanced", as shown in the figure. 4. Finally, in the "Advanced" window, the user can cancel the delay by turning off "Low latency mode is on by default", as shown in the figure. How to watch replays of Douyu live broadcast? 1. In the first step, we first find the Douyu live broadcast software icon on the computer desktop, then right-click and select the "Open" option. 2. In the second step, after opening the Douyu live broadcast software, we find "Follow" on the left side of the page. option, click to open this option and find a host you like on the right page, click the "Recording" option 3. The third step, proceed
Internet Explorer opens Edge: How to stop MS Edge redirection
Apr 14, 2023 pm 06:13 PM
It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist
How to solve the problem that css cannot be loaded
Oct 20, 2023 am 11:29 AM
The solutions to the problem that CSS cannot be loaded include checking the file path, checking the file content, clearing the browser cache, checking the server settings, using developer tools and checking the network connection. Detailed introduction: 1. Check the file path. First, please make sure the path of the CSS file is correct. If the CSS file is located in a different part or subdirectory of the website, you need to provide the correct path. If the CSS file is located in the root directory, the path should be direct. ; 2. Check the file content. If the path is correct, the problem may lie in the CSS file itself. Open the CSS file to check, etc.
Outlook freezes when inserting hyperlink
Feb 19, 2024 pm 03:00 PM
If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.
What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser)
Feb 10, 2024 am 10:30 AM
More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu
