Lazy load images using Intersection Observer

.vue

<template>
  <img ref='image' :alt="title" />
</template>
<script lang="ts">
export default {
  name: 'VueImage',
  props: {
    imageSrc: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      observer: null,
    };
  },
  mounted() {
    if (window.IntersectionObserver) {
      this.handleObserver();
    } else {
      this.$refs.image.src = this.imageSrc;
    }
  },
  methods: {
    setBgImage(entries) {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          this.$refs.image.src = this.imageSrc;
          this.observer.disconnect();
        }
      });
    },
    handleObserver() {
      this.observer = new IntersectionObserver(this.setBgImage, { rootMargin: '0px', threshold: 0.1 });
      this.observer.observe(this.$refs.image);
    },
  },
  beforeDestroy() {
    this.observer = null;
  },
};
</script>