How to handle lazy loading and placeholder of images in Vue

How to deal with lazy loading and space occupancy of images in Vue

Lazy loading (Lazy Loading) is a performance optimization technology that can delay loading of images in web pages , which is loaded only when the user scrolls to the location of the image, to reduce initial loading time and network bandwidth usage. At the same time, the use of placeholder technology can maintain the stability of the page layout and avoid the problem of page layout disorder caused by slow image loading. This article will introduce how to implement lazy loading and placeholder functions of images in Vue, and provide specific code examples.

1. Install the plug-in

First, we need to install a Vue plug-in to implement the lazy loading function of images. It is recommended to use the vue-lazyload plug-in, which is easy to use and has high compatibility. Install through the following command:

npm install vue-lazyload --save

2. Configure the plug-in

In the Vue entry file (usually main.js), we need to introduce and configure the vue-lazyload plug-in. The specific configuration can be adjusted according to actual needs. Here is a commonly used configuration example:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: 'error.jpg', // 图片加载失败时显示的占位图片
  loading: 'loading.gif', // 图片加载过程中显示的占位图片
  attempt: 3 // 加载失败后的重试次数
})

In the above configuration, we set the placeholder image displayed when the image loading fails to be error.jpg. During the image loading process The placeholder image displayed is loading.gif, and the image will be reloaded up to three times after a loading failure.

3. Application plug-in

Where images are specifically used, we can lazily load images through the command v-lazy, and we can use the v-loading command to add an overhead in the image loading process. bit effect. The following is an example of using the vue-lazyload plug-in to implement lazy loading and placeholder of images:

<template>
  <div>
    <img  v-lazy="imageSrc" v-loading="isLoading" / alt="How to handle lazy loading and placeholder of images in Vue" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '', // 实际图片的地址
      isLoading: true // 控制加载过程中的占位效果
    }
  },
  mounted() {
    // 模拟获取实际图片地址的过程
    setTimeout(() => {
      this.imageSrc = 'realImage.jpg'
      this.isLoading = false
    }, 1000)
  }
}
</script>

In the above code, we bind the actual address of the image to the imageSrc attribute through the v-lazy instruction, and pass v The -loading directive binds the placeholder effect during the loading process to the isLoading attribute. In the mounted life cycle hook, we simulated a process of obtaining the actual address of the image, assigned the actual address to imageSrc after 1 second, and set isLoading to false to display the image.

Through the above configuration and sample code, we can implement the lazy loading and placeholder functions of images in Vue. This can improve the loading speed and user experience of web pages, and avoid page layout problems caused by slow loading of images. At the same time, through the flexible configuration of the vue-lazyload plug-in, we can adjust the effects of lazy loading and placeholder according to needs to achieve better optimization results.

The above is the detailed content of How to handle lazy loading and placeholder of images in Vue. For more information, please follow other related articles on the PHP Chinese website!