How to use Vue to implement lazy loading of images and placeholder images?

In websites, the use of images is very common, and how to optimize the loading of images has become one of the focuses of developers. One of the important optimizations is lazy loading of images, which means that images in the visible area are only loaded when the user scrolls the web page, and are not loaded in the unscrolled area, thereby reducing the loading pressure of the page and improving the user experience.

When using the Vue framework, you can easily implement lazy loading of images and placeholder images by using the instructions it provides.

1. For the implementation of lazy loading of images, we can use the Vue-lazyload library. First, you need to use npm to install the library:

npm i vue-lazyload -S

2. Introduce the library into Vue’s entry file main.js and configure it:

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

where , preLoad specifies the aspect ratio of preloading, for example, if you set it to 1.3, then when the image is preloaded, the width will be 1.3 times the target width; error and loading are the image placeholder images when loading fails and loading respectively; attempt is the number of attempts to load the image.

3. In the position of the image that needs to be loaded lazily, replace the src attribute with v-lazy Command:

<img v-lazy="path/to/image.png">

4. Specify the area in the page where lazy loading needs to be enabled:

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

The above code displays a list of images in a loop on the page, each image uses lazy loading, and at the same time mounted The hook function specifies the area where lazy loading is enabled as the container module, so that lazy loading of images can be achieved.

5. Regarding the production of placeholder images, you can use online tools or PhotoShop and other tools to create placeholder images that suit your website style.

Through the above steps, you can easily achieve the effect of lazy loading of images and placeholder images in Vue, which can greatly reduce the loading pressure of the website and improve the user experience.

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