[v1-beta] QImg Lazy Load

[spyke113]

Hi all! Advise me the best way to lazy load images via QImg (based on Intersection Observer API). I didn’t find this prop in component documentation.

[danielcommesse]

This would be awesome, I’m also looking for something like this. Maybe someone can help.

[Cego]

Try with this: https://github.com/Akryum/vue-observe-visibility

[spyke113]

@Cego Yes, thanks, I saw it, but I already found the ScrollFire directive.
https://v1.quasar-framework.org/vue-directives/scroll-fire

[Ret50]

Hello. I’ve written such a component with the new Intersecting directive:

<template>
<div class=“relative-position” v-intersection.once=“onIntersection”>
<img :src=“src” width=“100%” />
<slot></slot>
</div>
</template>

<script>
export default {
name: ‘LazyImg’,
data () {
return {
src: ‘’
}
},
props: {
srclazy: {
type: String
}
},
methods: {
onIntersection (entry) {
if (entry.isIntersecting) {
this.src = this.$props.srclazy
}
}
}
}
</script>
<style lang=“sass” scoped></style>