[Feature Request] add v-img lazyload prop - only start loading src if element is visible

What problem does this feature solve?

Option to lazyload images only if the content is visible Google “Pagespeed Insights” would like to prioritize visible content.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fimages

It would optimize network roundtrips and only loads images which are in visible area

What is your proposed solution?

Add a prop to enable lazyload - only load images which are inside of visible content.

Two references of projects where this technique is applied:

• https://github.com/aFarkas/lazysizes
• https://github.com/hilongjw/vue-lazyload

[dillionverma]

A short and sweet solution for this using Interaction Observer API.

<template>
  <v-img :src="srcUrl" />
</template>

<script>
export default {
  data: () => ({ 
    observer: null, 
    intersected: false,
    my_url: "https://myurl.com"
  }),
  computed: {
    srcUrl() {
      return this.intersected ? this.my_url : '';
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(entries => {
      const image = entries[0];
      if (image.isIntersecting) {
        this.intersected = true;
        this.observer.disconnect();
      }
    });

    this.observer.observe(this.$el);
  },
  destroyed() {
    this.observer.disconnect();
  }
}
</script>

Works flawlessly with no extra dependencies.

Credit to: https://alligator.io/vuejs/lazy-image/

[MatthewAry]

DId this make it into 1.3.0? If so the docs don’t reflect it.