Optimize image loading logic

[tinohager]

Enhancement

If too many images are drawn the page change will be slow but it depends on the divs. Perhaps virtual scrolling should be added here.

Images are loaded only when they enter the viewport. With lazy attributes, they begin loading as you scroll down.

<template>
  <div class="gallery">
    <div v-for="(image, index) in images" :key="index" class="image-wrapper" ref="imageWrapperRef">
      <img v-if="image.loaded" :src="image.src" :alt="`Image ${index}`" class="image" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'

const imageWrapperRef = ref()
const images = ref()
const observer = ref<IntersectionObserver | null>(null)

onBeforeMount(() => {
  images.value = Array.from({ length: 500 }, (_, index) => ({
    id: index + 1,
    src: `https://picsum.photos/id/${(index % 1000) + 1}/300/200`,
    loaded: false,
  }))
})

onMounted(() => {
  initLazyLoad()
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
  if (observer.value) {
    observer.value.disconnect()
    observer.value = null
  }
})

function initLazyLoad() {
  console.log('initLazyLoad')

  const options = {
    root: null, // Viewport
    rootMargin: '100px',
    threshold: 0.1,
  }

  observer.value = new IntersectionObserver((entries, obs) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const index = imageWrapperRef.value.indexOf(entry.target)
        if (index !== -1) {
          if (!images.value[index]) {
            return
          }

          images.value[index].loaded = true
          obs.unobserve(entry.target)
        }
      }
    })
  }, options)

  imageWrapperRef.value.forEach((wrapper: Element) => observer.value?.observe(wrapper))
}
</script>

<style scoped>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 300px));
  gap: 10px;
  justify-content: center;
}

.image-wrapper {
  width: 240px;
  height: 160px;
  background-color: #ddd;
}

.image {
  width: 100%;
  height: auto;
  display: block;
}
</style>