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

1. First, you need to run the project

   Enter npm run serve on the console

2. Navigate to the relevant directory and open developer debugging (F12)

3. Find the "network option", change the network to slow 3G, and then turn on disable cache
   

4. 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.