Several methods to implement lazy loading of images in vue

Vue-lazyload is an image lazy loading library based on Vue.js. Its implementation principle is based on the Intersection Observer API. The Intersection Observer API is a way to asynchronously observe the intersection state of a target element with its ancestor elements or the top-level document viewport.

The implementation principle of Vue-lazyload is as follows:

1. Add a custom directive v-lazy on the image element that needs to be loaded lazily, and pass its parameters to the Vue-lazyload component.
2. The Vue-lazyload component monitors the intersection status of the target element through the Intersection Observer API, that is, the callback function is triggered when the target element enters the visible area.
3. In the callback function, the Vue-lazyload component will trigger a loading event through $emit to notify the parent component to load the image.
4. After receiving the loading event, the parent component will set the real path of the image through $src or other methods to complete the loading of the image.

     In this way, Vue-lazyload can implement lazy loading of images, that is, loading them only when they enter the visible area, thus improving page loading speed and performance.

1. Use Vue’s own instructions

Vue itself provides an instruction v-lazy, which can implement lazy loading of images. How to use it:

<img v-lazy="imageSrc" />

Among them, imageSrc is the image path that needs to be loaded lazily. When the image enters the visible area, Vue will automatically load the image.

2. Use third-party libraries (recommended)

There are many third-party libraries in the vue community that can implement lazy loading of images, such as vue-lazyload, vue-lazyload-enhanced, etc. These libraries provide more configuration items and functions to meet more needs. How to use it:

2.1 Installation and download

npm i [email protected] -S

2.2 main.js import

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  // 可选配置项，可省略
  error: require('./error.jpg'), // 加载失败时显示的图片
  loading: require('./loading.gif'), // 加载中时显示的图片
  preLoad: 1.3, // 预加载高度的比例
  attempt: 3 // 尝试加载次数
}) 

2.3 Page usage

<template>  
  <div>  
    <img v-lazy="imageSrc" />  
  </div>  
</template>  
  
<script>   
import Vue from 'vue'       // main.js 已引入的可忽略
import VueLazyload from 'vue-lazyload'  // main.js 已引入的可忽略
Vue.use(VueLazyload, {      // main.js 已引入的可忽略 
  // 配置项...  
})  
</script>


// 个人实操使用，可参考
<template>
  <div class="scroll-container">
    <div class="demo-image__lazy">
      <img v-for="(url, index) in imgUrl" :key="index" v-lazy="url" /> // 遍历图片
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgUrl: [  // 需要显示的所有图片
          require('@/assets/help/1.jpg'),
          require('@/assets/help/2.jpg'),
          require('@/assets/help/3.jpg'),
          require('@/assets/help/4.jpg'),
          require('@/assets/help/5.jpg'),
        ],
      }
    },
  }
</script>
<style lang="less" scoped> // 根据视口大小显示图片宽度
  @media screen and (max-width: 1200px) {
    .demo-image__lazy img {
      width: 100%;
    }
  }
  @media screen and (min-width: 1200px) {
    .demo-image__lazy img {
      width: 50%;
    }
  }
</style>

 3. Custom instructions

In addition to using Vue's own instructions and third-party libraries, you can also implement lazy loading of images through custom instructions. In custom instructions, you can use the Intersection Observer API to monitor the intersection status of the target element to implement lazy loading of images. How to use it:

<template>  
  <div>  
    <img v-lazyload="imageSrc" />  
  </div>  
</template>  
  
<script>  
export default {  
  directives: {  
    lazyload: {  
      inserted: function (el, binding) {  
        const observer = new IntersectionObserver(([entry]) => {  
          if (entry.isIntersecting) {  
            const img = new Image()  
            img.src = binding.value  
            el.appendChild(img)  
            observer.unobserve(el)  
          }  
        }, {threshold: 0.1})  
        observer.observe(el)  
      }  
    }  
  }  
}  
</script>