progressive-img
Custom element - like img, but progressive and lazy.
Custom element <progressive-img>
Custom element (written in Polymer) to load img progressively and lazily. It first shows tiny blurred placeholder and loads full-sized image afterwards. It can also defer loading until placeholder is clicked or enters viewport.
Demo
Basic usage
You basically take all your <img> tags, change them to <progressive-img> and add placeholder attribute. It will display a blurred placeholder and load src/srcset after being clicked.
<progressive-img
src="..."
srcset="..."
sizes="..."
alt="..."
placeholder="my-placeholder.jpg">
</progressive-img>
Load strategy
<progressive-img
srcset="..."
placeholder="..."
alt="..."
load-strategy="instant | on-visible">
</progressive-img>
Load strategy controls when image starts loading. There are 3 options:
Load strategy | Behavior |
---|---|
instant | image will start loading immediately |
on-visible | image will load if is visible or when enters viewport |
Clicking the placeholder will always trigger image loading no matter what. You can completely leave out load-strategy if that's all you need.
Intersection margin
<progressive-img
srcset="..."
placeholder="..."
alt="..."
load-strategy="on-visible"
intersection-margin="500px">
</progressive-img>
Intersection margin only takes effect if load-strategy="on-visible"
is set. Default value is 200px, so image will trigger loading
when enters 200px wide area around viewport.
For this effect, progressive-img uses intersectionObserver API. Here you can read more about how it works:
intersection-margin attribute is assigned to rootMargin of intersection observer, so you can use any valid value of rootMargin.
IntersectionObserver Polyfill
If you need to use load-strategy=on-visible
in browsers that don't currently
support intersection API,
you can just include official polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill,
it's one liner.
What about browsers with disabled javascript?
Without js, progressive-img can't load. Which is great because you can easily create fallback:
<progressive-img src="..." alt="..." placeholder="..."></progressive-img>
<noscript>
<img src="" alt="">
</noscript>
Styling
progressive-img uses 4 CSS custom properties to customize the appearance.
CSS property | description |
---|---|
--placeholder-filter | Filter applied to placeholder image. Defaults to blur(10px) saturate(1.2) |
--placeholder-scale | Transform scale value. Defaults to 1.1 to prevent blurred placeholder from having white borders |
--transition-duration | Duration of swapping placeholder and final image. Defaults to .2s |
--transition-timing-function | Timing function of swapping placeholder and final image. Defaults to ease-in |
You can find examples of this in demo page
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
- @polymer/polymer#^3.0.0
- eslint-plugin-import#^2.12.0
- eslint-plugin-jsx-a11y#^6.0.3
- eslint-plugin-react#^7.8.2
- Released
- 2018-05-27
- Maturity
- IMPORTED
- License
- BSD 3-clause "New" or "Revised" License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
progressive-img - Vaadin Add-on Directory
Custom element - like img, but progressive and lazy.View on GitHub
progressive-img version 1.0.0
### Dependencies
* @polymer/polymer#^3.0.0
* eslint-plugin-import#^2.12.0
* eslint-plugin-jsx-a11y#^6.0.3
* eslint-plugin-react#^7.8.2