Two methods of lazy loading of vue images are explained in detail

What is lazy loading?

Lazy Loading is a web page optimization technology, also known as lazy loading. Its main purpose is to load only the content in the currently visible area when the web page is loading, and delay the content in other invisible areas, thereby improving the loading speed and performance of the web page.

In lazy image loading, the definition of lazy loading means that when a web page is loading, only the pictures in the visible area are loaded, while the pictures in other invisible areas are delayed. When the user scrolls the page, the pictures entering the visible area will be loaded, while the pictures leaving the visible area will be unloaded, thereby reducing the loading time and bandwidth consumption of the page.

The implementation method of lazy loading can be used to monitor scroll events to determine whether the picture enters the visible area, and then dynamically load the picture. In addition, you can also use the Intersection Observer API provided by the browser to achieve lazy loading of images, which can more flexibly monitor whether elements enter the window.

Lazy loading plays an important role in improving web page performance, especially for pages containing a large number of images, which can significantly reduce the loading time of the page and improve the user experience. At the same time, lazy loading can also reduce bandwidth consumption and save server resources. Therefore, lazy loading has become one of the commonly used optimization techniques in modern web development.

The following are two commonly used implementation methods

Scenarios and advantages and disadvantages of using third-party library vue-lazyload:

Scene:

If you want to quickly implement the lazy loading function of image and do not want to write complex logic and processing details by yourself, you can choose to use vue-lazyload.

• If you want to use lazy image loading in multiple components and want unified configuration and management, you can use vue-lazyload to manage image loading uniformly.

advantage:

It is simple and easy to use. You only need to configure it once and then use the v-lazy directive in the component to achieve lazy loading of images.

• You can configure the preloaded height ratio, the pictures displayed when loading fails, the pictures displayed during loading, etc., which has good customization.
• Supports retry function after image loading fails.

shortcoming:

Third-party libraries need to be installed and introduced, increasing the dependency and volume of the project.

• Some complex lazy loading requirements may not be met.

Scenarios and Pros and Cons of Using Intersection Observer API:

Scene:

If you want more customization and flexibility, you can use the Intersection Observer API to achieve lazy image loading.

• If you want to achieve some special lazy loading effects, such as the image sliding in from different directions, the image loading has animation effects, etc., you can use the Intersection Observer API to achieve it.

advantage:

It can achieve more customized lazy loading effects, such as the animation effects of the image, sliding direction, etc.

• For some complex lazy loading requirements, it can be handled more flexibly.

shortcoming:

More code is required to implement lazy loading logic, which may be more complicated than using third-party libraries.

• Compatibility issues, Intersection Observer API is not supported in some older browsers, and needs to be solved by using polyfill.

To sum up, using the third-party library vue-lazyload is suitable for simple image lazy loading needs, which can be quickly implemented and has good customization; while using the Intersection Observer API is suitable for situations where there are higher requirements for lazy loading effects and requires customization and flexible processing. According to project needs and personal preferences, choose the appropriate method to achieve lazy loading of images.

Specific code implementation

Method 1: Use the third-party library vue-lazyload

1. First install the vue-lazyload library:

npm install vue-lazyload

2. Introduce vue-lazyload and configure:

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
(VueLazyload, {
  preLoad: 1.3, // Preloaded height ratio  error: 'path/to/', // Picture displayed when the image fails to load  loading: 'path/to/', // Picture displayed during picture loading  attempt: 1 // Number of retry times after loading error});

3. Use the v-lazy directive in the component to lazy load the picture:

<template>
  <img v-lazy="imageSrc" alt="Lazy loaded image">
</template>
<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/' // The path to the picture    };
  }
};
</script>

In this way, vue-lazyload will automatically load the image when it enters the visual area.

Method 2: Use Intersection Observer API

1. Define an Intersection Observer instance in the component:

<template>
  <div>
    <img ref="image" :src="loadingSrc" alt="Lazy loaded image">
  </div>
</template>
<script>
export default {
  data() {
    return {
      loadingSrc: 'path/to/', // Picture displayed during picture loading      imageSrc: 'path/to/', // The path to the picture    };
  },
  mounted() {
    const options = {
      root: null, // Default is window      rootMargin: '0px',
      threshold: 0.1 // Percentage of pictures entering the window    };
    const observer = new IntersectionObserver((entries, observer) => {
      (entry => {
        if () {
          ();
          (); // Stop monitoring        }
      });
    }, options);
    (this.$);
  },
  methods: {
    loadImage() {
      const image = new Image();
       = ;
       = () => {
        this.$ = ;
      };
    }
  }
};
</script>

In this way, when the image enters 10% of the window, Intersection Observer will trigger the callback function and then load the image.

The above are two commonly used methods for lazy loading of Vue images. Using the third-party library vue-lazyload can more conveniently implement lazy image loading, while using the Intersection Observer API is more flexible and can achieve more customized lazy loading effects. Depending on project needs and personal preferences, you can choose the right method to achieve lazy loading of images.

This is the end of this article about two methods of lazy loading vue images. For more related content on lazy loading vue images, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!