How to use Vue to implement lazy loading effects for images

var app = new Vue({
  el: '#app',
});

Step 3 : Create a picture component

Next, we create a picture component, which will be responsible for displaying pictures and implementing lazy loading effects. We can define this component in the components option of the Vue instance. The specific code is as follows:

Vue.component('lazy-image', {
  props: ['src'],
  data: function() {
    return {
      loaded: false,
    };
  },
  methods: {
    loadImage: function() {
      var image = new Image();
      image.src = this.src;
      image.onload = () => {
        this.loaded = true;
      };
    },
  },
  mounted: function() {
    this.loadImage();
  },
  template: `
    

      
      

    
  `,
});

In the above code, we created a component named lazy-image. This component accepts a src attribute, which represents the URL of the image to be displayed. In the data option of the component, we define a loaded attribute to indicate whether the image has been loaded.

In the methods option of the component, we created a loadImage method. This method is called when the component is mounted on the page. In the loadImage method, we create a new image object, assign the src attribute to it, and set the loaded attribute to when the image is loaded. true.

Finally, in the component's template option, we define the component's rendering template. When the loaded attribute is true, the image is displayed, otherwise a placeholder is displayed.

Step 4: Use the image component

We can use the image component in the template of the Vue instance, and use the tag where the image needs to be displayed. , and pass the URL of the image to be displayed to the component as the src attribute. The specific code is as follows:

With the above code, the image will only start loading when the user scrolls to the visible area.

To sum up, we have implemented the lazy loading effect of images through Vue.js. When the user scrolls to the image position, the image will start loading, which can greatly improve the loading speed and user experience of the web page. The above code example provides a basic implementation method, and you can further expand and optimize it according to actual needs.

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