Vue uses new Image to implement image preloading function

Implement image preloading in Vue

1. Create a Vue component

We will create a Vue component and use it in itcreatedLifecycle hook to preload pictures. Used herenew Image()The way to preload the picture.

2. Sample code

<template>
  <div>
    <!-- Pictures displayed -->
    <img :src="image1Src" alt="Image 1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Bind to the image path on the page      image1Src: "",
    };
  },
  created() {
    (this.image1Src); // Preload the picture  },
  methods: {
    // Preload the image method    preloadImage(src) {
      const img = new Image(); 
       = src;        
       = () => {
        ('Image loaded:', src); // Callback after image loading is completed      };
       = () => {
        ('Failed to load image:', src); // Callback for image loading failure      };
    }
  }
};
</script>

Code parsing

When you set = srcWhen the browser starts to follow the providedsrcThe path is used to load the image resource. This process includes:

• ask: The browser sends a request to the server to obtain the image file.
• load: The cache of image files downloaded from the server to the browser.
• Rendering: When the browser needs to display the image, it loads and renders it from the cache.

Extension: Preload large numbers of images in Vue

If you need to preload a large number of images, you can do it through arrays and loops:

export default {
  data() {
    return {
      images: [
        '',
        '',
        '',
        // Other image paths      ]
    };
  },
 created() {
     ()
 },
 methods: {
      preLoadimg() {
        let count = 0;
        for (let img of ) {
          let image = new Image();
           = img;
          if () {
            ('The image is already in cache');
            count++;
            if (count === ) {
              ('Load all completed');
            }
          } else {
             = () => {
              count++;
              if (count === ) {
                ('Load all completed');
              }
            };
          }
        }
      }
    }
};

advantage

• Manage image preloading through the Vue component's lifecycle hook to avoid affecting page rendering.
• usenew Image()The created image objects are not rendered directly to the page, so they will not affect the page layout.
• Image preloading can be automatically performed when component creation to improve user experience.

Optimization suggestions

When the number of images is high, preloading all images at once may affect performance, especially for users with poor network conditions. Therefore, it can be combined with lazy loading to improve the user experience. Lazy loading can only be loaded when the image enters the viewport, thereby improving the initial page loading speed and user experience.

• Lazy loading implementation

  • Use loading="lazy"

  • Or use the following steps to achieve lazy loading of images:

    Installation dependencies:useIntersection Observer APITo detect whether the picture enters the viewport. Vue also has special lazy loading libraries, such asvue-lazyload。

    Modify components: Use lazy loading logic in components.

Summarize

Implementing image preloading in Vue is a simple and efficient process, usually through lifecycle hook functions (e.g.created) to manage. You can usenew Image()Create an image object and set itsrcProperties to implement preloading of images and reduce the waiting time during subsequent visits. Write specific implementations according to your own project.

The above is the detailed content of Vue's use of new Image() to implement image preloading function. For more information about Vue's image preloading, please follow my other related articles!