Lazy loads images with IntersectionObserver
npm install @power-elements/lazy-image



Lazily load your images!
npm -i -S @power-elements/lazy-image
`📦 Load it!
`html
`💪 Use it!
`html
`The optional placeholder could be any element. Inline SVG, Pure CSS graphics, or an
would work best.💄 Style it!
You should give your elements some specific dimensions, since it absolutely positions its shadow children. In most cases, you should set the wrapping element as well as the --lazy-image- custom properties to the known display dimensions of your image.`html
` exposes a set of custom properties for your customizing delight:Property|Purpose|Default
-----|-----|-----
--lazy-image-width|Width of the internal image and placeholder elements|100%
--lazy-image-height|Height of the internal image and placeholder elements|100%
--lazy-image-fit|object-fit property of the internal image and placeholder elements|contain
--lazy-image-fade-duration|Duration of the fade in from the placeholder to the image. Set to 0 to disable fading.|0.3s
--lazy-image-fade-easing|ease property of the opacity transition for the image and placeholder|ease$3
lazy-image manages the loading of your images via an Intersection Observer. In browsers where an Intersection Observer is not present, your images will be loaded immediately much like standard elements. Conditionally delivering the IntersectionObserver polyfill along with your lazy-image`s to your users will ensure that all users experience the benefits of loading images lazily. Stay lazy, friend!