How to implement lazy loading of images in Vue?

How to implement lazy loading of images in Vue?

Lazy loading (or lazy loading) is a technique for optimizing web page performance, especially suitable for websites that load a large number of images. In Vue, we can implement lazy loading of images through Vue instructions. This article will introduce how to use Vue's lazy loading plug-in to implement lazy loading of images, and provide corresponding code examples.

1. Install and introduce plug-ins

First, we need to install a Vue lazy loading plug-in. In this article, we will use the vue-lazyload plugin. It can be installed through npm or yarn:

npm install vue-lazyload

After the installation is completed, introduce and register the plug-in in the main entry file of the Vue project (such as App.vue):

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

Vue.use(VueLazyload)

2. Use plug-ins to implement images Lazy loading

Now we can use the lazy loading directive in Vue components. Where images need to be loaded lazily, replace the src attribute with the v-lazy directive and set the image address:

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'placeholder.png' // 初始时显示的占位图片
    }
  }
}
</script>

In the above example, we change the image's The actual address (that is, the image address that needs to be loaded lazily) is bound to the imageSrc variable. When loading for the first time, the value of imageSrc is the address of the placeholder image. When the image is scrolled to the visible area, the value of imageSrc is updated to the actual image address. This will prevent loading too many images from causing unnecessary impact on web page performance.

3. Optional configuration items

vue-lazyloadThe plug-in also provides some optional configuration items that can be configured according to actual needs. The following are some commonly used configuration options and their descriptions:

• loading: Set the temporary placeholder for the image. It can be a URL string or an object containing the image URL.
• error: Set the image display when loading fails. Similar to the loading option, it can be a URL string or object.
• attempt: Set the maximum number of retries when image loading fails.
• observer: Whether to use IntersectionObserver to monitor whether the image enters the visible area. When it is true, image loading will be triggered with a delay. When the image moves out of the visible area, image loading will stop. The default is true, and it is recommended to keep the default value.

Vue.use(VueLazyload, {
  loading: 'loading.png',
  error: 'error.png',
  attempt: 3,
  observer: true
})

4. Summary

By using Vue’s lazy loading plug-in, we can easily implement the lazy loading function of images and optimize performance in websites with a large number of images. This article introduces how to install and introduce the vue-lazyload plug-in, and how to use lazy loading instructions in Vue components. Some optional configuration items are also provided for configuration according to actual needs. I hope this article can help you implement lazy loading of images in your Vue project.

Code example:

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  loading: 'loading.png',
  error: 'error.png',
  attempt: 3,
  observer: true
})

export default {
  data() {
    return {
      imageSrc: 'placeholder.png' // 初始时显示的占位图片
    }
  }
}
</script>

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