@power-elements/lazy-image
v2.2.0
Lazy loads images with IntersectionObserver
99/weekUpdated 3 years agoISCUnpacked: 68.9 KB
Published by Benny Powers
npm install @power-elements/lazy-image
Lazily load your images!
🚛 Get it!
``
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!