Picture is a key point of website optimization, picture lazy loading is one of the better methods. When network requests are slow, add a low-pixel placeholder image to the image in advance so that it doesn’t stack on top of each other or show a large blank space to make the user experience a little better.

npm

$ npm i vue-lazyload -D
Copy the code

Plug-in address

Address 1 address 2

case

Case link

usage

1. Main.js in the entry file


import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'  // Introduce this lazy plug-in

Vue.use(VueLazyLoad, {
  preLoad: 1.error: require('./assets/img/error.jpg'),
  loading: require('./assets/img/homePage_top.jpg'),
  attempt: 2,})Copy the code

2. After the entry file is added, the component can be used directly anywhere in the img: SRC -> V-lazy

<template>
    <div id="lazyload">
        <! Img uses lazy loading of images. V-lazy replaces v-bind: SRC -->
        <ul class="img">
            <li v-for="(item,index) in imgList"> 
                <img v-lazy="item" alt="" style="width: 768px;"> 
            </li>
        </ul>
 
        <! Image lazy loading is used in background images. v-lazy:background-image = "" -->
        <ul class="bgImg">
            <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'LazyLoadDemo'.data(){
        return{
            imgList: [require('.. /assets/img/1.jpg'),
                require('.. /assets/img/2.jpg'),
                require('.. /assets/img/3.jpg'),
                require('.. /assets/img/4.jpg'),
                require('.. /assets/img/5.jpg'),
                require('.. /assets/img/6.jpg'),
                require('.. /assets/img/7.jpg'),
                require('.. /assets/img/8.jpg'),
                require('.. /assets/img/9.jpg'),
                require('.. /assets/img/10.jpg'),
                require('.. /assets/img/11.jpg'),
                require('.. /assets/img/12.jpg'),
                require('.. /assets/img/13.jpg'),
                require('.. /assets/img/14.jpg'),
                require('.. /assets/img/15.jpg'),
                require('.. /assets/img/16.jpg'),
                require('.. /assets/img/17.jpg'),
                require('.. /assets/img/18.jpg'),
                require('.. /assets/img/19.jpg'),
                require('.. /assets/img/20.jpg'),],}}}</script>
<style lang="scss" scoped>
    #lazyload{
        width: 768px;
        background-color: #fcc;
        margin: 0 auto;
        .img{
            width: 768px;
            background-color: #fcc;
        }
        .bgImg{
            li{
                width: 768px;
                height: 522px;  
                margin-bottom: 10px;
                background-repeat: no-repeat; // Pay attention to the size of the image, otherwise it will not display fullybackground-size: cover; }}}</style>
Copy the code

Function extension

Now that the simple effect of lazy loading of images has been implemented, you can extend the document development API:

Used to summarize

The img tag uses lazy loading: v-lazy instead of v-bind: SRC; V -lazy:background-image = "" ==>> It is best to give a key attribute, that is:Copy the code
<img v-lazy="Picture address" :key="Picture address">
Copy the code

Refer to the blog

Blog 1 blog 2