0.1.2 • Published 6 years ago
@byte-size/bsu-lazy-image v0.1.2
Dependencies
IntersectionObserver
A vue.js transition (to fade out placeholder
Notes
- 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>
```
- Image breakpoints are hardcoded Tailwind parameters.
0.1.2
6 years ago