vue uses lazy loading of pictures
preface
What is lazy loading
Generally speaking, it means loading pictures when needed
The advantage of lazy loading is to reduce the pressure on the server. When the network is relatively slow, you can add a placeholder picture to this picture in advance to improve the user experience.
1, Install related packages
Install packages required for lazy loading
npm install vue-lazyload --save
2, Use steps
1. Introduction
Import the package in the entry file of the project, and then register
The code is as follows (example):
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // Introducing plug-ins import VueLazyload from 'vue-lazyload' // Register plug-ins Vue.use(VueLazyload,{ loading:'https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg '/ / lazy loading default picture }) new Vue({ render: h => h(App), }).$mount('#app')
Analysis of some parameters:
preLoad: represents the element of lazload as a percentage of the distance from the bottom of the page The calculated value is (preload - 1), and the default value is 1.3
error: for the picture displayed after table loading failure, a string needs to be passed in for parsing
Loading: a string needs to be passed in to parse the image displayed successfully in tabular loading
attempt: the Number of retries after failed image loading. A Number needs to be passed in
To modify a lazy loaded style, you can use the following code:
img[lazy="loading"]{ display:block; width:150px !important; height:150px !important; margin:0 auto; }
This style can be determined according to your own needs, not necessarily configured
For details, see: https://www.npmjs.com/package/vue-lazyload
2. Use
It is easy to use in the created project
Use (: src - > v-lazy)
The code is as follows (example):
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <br /> <img v-lazy="a ? img[0] : img[1]" @click="changeImg" /> </div> </template> <script> export default { name: 'App', data() { return { a: true, img: [ // Picture 1 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ETHKvrgFkIGb1teNrFHIYQHaLH?w=186&h=279&c=7&r=0&o=5&dpr=1.25&pid=1.7', // Picture 2 'https://tse2-mm.cn.bing.net/th/id/OIP-C.zPTuPEWVwIUcWgJSi93yLwHaLG?w=186&h=279&c=7&r=0&o=5&dpr=1.25&pid=1.7' ] } }, methods: { changeImg() { this.a = !this.a } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
If it is a circular picture, we need to specify a key value, for example:
<img v-lazy="img.src" :key="img.src" >
Observe whether lazy loading is realized
-
First, you need to run the project
Enter npm run serve on the console
-
Navigate to the relevant directory and open developer debugging (F12)
-
Find the "network option", change the network to slow 3G, and then turn on disable cache
-
Refresh the interface and observe the changes of the picture
3, About the composition of the package
1. Brief introduction
The main composition of the package is embodied by using user-defined plug-ins and user-defined instructions
2. Simple operation
Create a plugins folder under src folder, which is used to encapsulate plug-ins, and then create theworld JS file book
Write a plug-in with the following code:
// The plug-in must expose an object let TheWorld = {} TheWorld.install = function (Vue, options) { // console.log('I am a plug-in, I called ') / / when in main When the JS file is imported into the registration, it will be called // console.log(Vue) / / you can receive the parameter Vue // console.log(options) / / you can receive the parameter configuration object // With Vue, we can call a series of APIs on Vue, such as Vue component; Vue. Filter, etc Vue.directive(options.name, (element, params) => { // console.log('I executed ') / / it will be executed when the page is used // You will receive the parameter element: bound element; params: some object information of this object element.innerHTML = params.value.toUpperCase() // There is a parameter in params. Modifiers store modifiers. When you use custom instructions, the modifiers added will be stored in modifiers }) } export default TheWorld
Vue.js plug-in should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object
On the page, we can use:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <br /> <p v-world="text"></p> </div> </template> <script> export default { name: 'App', data() { return { text: 'theworld' } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
At this time, the page is presented as THEWORLD
For more details, refer to Vue's documentation: https://cn.vuejs.org/v2/guide/custom-directive.html
summary
The above is about a processing method of image lazy loading in Vue. There are many methods to deal with image lazy loading, but the core is
Unchanged, the simple principle of lazy loading of pictures is to monitor the changes of pictures and replace the changed pictures with the displayed default pictures.