lazy-image
Lazily load your images with <lazy-image> custom element
<lazy-image>
Lazily load your images!
� Get it!
npm -i -S @power-elements/lazy-image
� Load it!
<!-- From CDN -->
<script async type="module" src="https://unpkg.com/@power-elements/lazy-image/lazy-image.js"></script>
<!-- From local installation -->
<script async type="module" src="/node_modules/@power-elements/lazy-image/lazy-image.js"></script>
<!-- In a Module -->
<script type="module">
import '/node_modules/@power-elements/lazy-image/lazy-image.js';
// ...
</script>
� Use it!
<lazy-image src="image.jpg" alt="Lazy Image">
<svg slot="placeholder"><use xlink:href="#placeholder-svg"></use></svg>
</lazy-image>
The optional placeholder could be any element. Inline SVG, Pure CSS graphics, or an <img src="data:foo"/>
would work best.
� Style it!
You should give your <lazy-image>
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.
<style>
html {
--lazy-image-width: 640px;
--lazy-image-height: 480px;
}
lazy-image {
width: var(--lazy-image-width);
height: var(--lazy-image-height);
}
</style>
<lazy-image src="https://fillmurray.com/640/480"></lazy-image>
<lazy-image>
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 |
Browser support
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 <img/>
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!
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2019-02-07
- Maturity
- IMPORTED
- License
- ISC License
Compatibility
- Framework
- Browser
- Browser Independent
lazy-image - Vaadin Add-on Directory
Lazily load your images withView on GitHub
lazy-image version 1.0.0
### Dependencies
* @polymer/lit-element#^0.2.2
lazy-image version 1.0.1
### Dependencies
* @polymer/lit-element#^0.2.2
lazy-image version 1.0.2
### Dependencies
* @polymer/lit-element#^0.2.2
lazy-image version 1.1.0
### Dependencies
* @polymer/lit-element#^0.2.2
* @power-elements/power-functions#^1.0.0
lazy-image version 1.2.0
### Dependencies
lazy-image version 1.2.1
### Dependencies
lazy-image version 1.2.3
### Dependencies
lazy-image version 1.2.4
### Dependencies
lazy-image version 2.0.0
### Dependencies
lazy-image version 2.0.1
### Dependencies
lazy-image version 2.0.2
### Dependencies
lazy-image version 2.0.3
### Dependencies
lazy-image version 2.0.4
### Dependencies
lazy-image version 2.1.0
### Dependencies
lazy-image version 2.1.1
### Dependencies