@byte-size/bsu-lazy-image

IntersectionObserver

Usage no npm install needed!

<script type="module">
  import byteSizeBsuLazyImage from 'https://cdn.skypack.dev/@byte-size/bsu-lazy-image';
</script>

README

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.