@byte-size/bsu-lazy-image

Dependencies

1. IntersectionObserver

2. A vue.js transition (to fade out placeholder

Notes

1. ATM, the image srcset is designed to accomodate only a single image and it's varios dimensions. If you want to add different images for different breakpoints, then you need to upgrade the placeholder to a element with same breakpoints as the real image. Something like that:

<picture v-if="!imageLoaded">
  <source media="(min-width: 1900px)" srcset="images/intro/lofi-coworking.jpg">
  <img class="h-full w-full absolute"
    :src="placeholder"
    :style="'object-fit: cover; filter: blur(10px);'"
  >
</picture>
```

1. Image breakpoints are hardcoded Tailwind parameters.