img component

<template>
  <div ref="imgComponent">
    <img v-if="check" :src="dataSrc" :alt="dataAlt" class="thumbnail">
    <div class="loading loading-img" v-else></div> <!-- Placeholder yang sama dengan saat pertama kali load -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      check: false //Menyembunyikan gambar
    };
  },
  props: ["data-src", "data-alt"],
  mounted(){
    let scroll = pageYOffset+outerHeight
    const position = this.$refs.imgComponent.getBoundingClientRect().top
    window.addEventListener('scroll',()=>{
      scroll = pageYOffset+outerHeight
      if(position<=scroll) this.check=true //memuat gambar ketika DOM sudah termuat secara sempurna
    })
    if(position<=scroll) this.check=true //memuat gambar ketika DOM sudah termuat secara sempurna
  }
};
</script>