How do you implement lazy loading for images in Vue.js ?

Implementing image lazy loading in Vue.js (also known as lazy loading) is an effective method to optimize page load time and performance. The core concept of lazy loading is that images are loaded only when they enter the viewport or are about to enter. Here are the specific implementation steps and examples:

1. Using Third-Party Libraries

The Vue community provides several convenient libraries for implementing image lazy loading, such as vue-lazyload. It supports not only image lazy loading but also component and background image lazy loading.

Installation and Usage of vue-lazyload

First, install this library:

bash
npm install vue-lazyload --save

Then, import and use it in your Vue project:

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

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

In Vue components:

html
<template>
  <div>
    <img v-lazy="image.url">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: {
        url: 'path/to/image.jpg'
      }
    }
  }
}
</script>

2. Manual Implementation of Lazy Loading

If you prefer not to use third-party libraries, you can manually implement image lazy loading. This typically involves listening for scroll events and checking whether the image has entered the viewport.

Example Steps:

• Bind the scroll event listener in the mounted hook.
• Create a function to check if the image is within the viewport.
• When the image is within the viewport, set the src attribute to the actual image URL to trigger loading.

html
<template>
  <div>
    <img :src="isVisible ? imageSrc : ''" @load="handleLoad" ref="lazyImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/real/image.jpg',
      isVisible: false,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.checkVisibility);
    this.checkVisibility(); // Initial check
  },
  methods: {
    checkVisibility() {
      const rect = this.$refs.lazyImage.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom > 0) {
        this.isVisible = true;
        window.removeEventListener('scroll', this.checkVisibility);
      }
    },
    handleLoad() {
      console.log('Image loaded');
    }
  }
}
</script>

In this example, we reference the image element using the ref attribute and check its position when the component loads. If the image is within the viewport, we set the src attribute to the actual image URL to trigger loading.

Summary

Using third-party libraries (such as vue-lazyload) can quickly and conveniently implement lazy loading, while manual implementation provides developers with greater control. Choose the appropriate method based on your project's requirements and complexity.