CODEWITHSUNDEEP
cssimagevue.jslazy-loadingnuxt.js
mart cube
mart cube

Reputation: 665

Vue lazyloading, remove spinner when image loads

I have a vue Nuxt project where I explore lazyloading with lazysizes package.

I created a spinner component (html css only) who should be visible only while the image is loading.

I also created an ImageItem component who includes the spinner component and it looks like this:

< script >
  import spinner from '~/components/spinner.vue'

export default {
  components: {
    spinner,
  },
  props: {
    source: {
      type: String,
      required: true,
    }
  },
} <
/script>
<style lang="scss" scoped>.imageItem {
  position: relative;
  .image {
    z-index: 2;
    &.lazyload,
    &.lazyloading {
      opacity: 0;
    }
    &.lazyloaded {
      opacity: 1;
      transition: all 1s linear 0.35s;
    }
  }
}

</style>
<template>
	<div class="imageItem">
		<spinner />
		<img class="image lazyload" :data-srcset="source" />
	</div>
</template>

To explain my code, I have props: source where In parent component i pass the image i want to lazyload. Also in the CSS while the image is loading, the image has .lazyloading class and when is loaded .lazyloaded class. Right now when Image is loaded i put it on top of the spinner.

My problem is, when I load the image I want to hide or destroy the spinner element since I think just putting the image on top is not the best way to do it. Can someone give me direction how should I properly hide the spinner when the image is loaded ?

Upvotes: 1

Views: 2119

Answers (1)

Ahmad Mobaraki
Ahmad Mobaraki

Reputation: 8160

Lazysizes fires an event when loading the image is finished : lazyloaded event, So you can do this : 

<template>
    <div class="imageItem">
        <spinner v-if="lazyloading"/>
        <img class="image lazyload" :data-srcset="source" />
    </div>
</template>

<script>
import spinner from '~/components/spinner.vue'

export default {
    data(){
        return {
           lazyloading
        }
    },
    mounted(){
       document.addEventListener('lazyloaded', (e) => {
              this.lazyloading = false;
          }
       });
   }

}
</script>

Upvotes: 2

Related Questions