lazy-img
Lazy loading img
[ This description is mirrored from README.md at github.com/CaptainCodeman/lazy-img on 2019-05-10 ]
<lazy-image>
lazy-img
is a lazy loading img element that is shadow-dom friendly
and uses IntersectionObserver
to detect when images are within the viewport and need to be loaded.
The default behavior is to use the browser viewport but more specific control
can be provided by setting the observe
property to a parent selector (either
an element id, class or tag name):
<div id="myscroller">
<lazy-img src="image1.jpg" observe="#myscroller"></lazy-img>
<lazy-img src="image2.jpg" observe="#myscroller"></lazy-img>
...
<lazy-img src="image99.jpg" observe="#myscroller"></lazy-img>
<div>
margin
and threshold
allow control over exactly when the loading is triggered as the
element comes into view. margin
can reduce or extend the detection area of the container
and threshold
can determine what proportion of the image needs to be within the area.
Demo is based on this example of intersection-observer
If used on a browser without support for IntersectionObserver
a polyfill will be
loaded automatically from the polyfill.io service.
Configure this with the following code in index.html
:
<script>
// Define polyfills for features that our app depends on:
window.PolyPoly = {
features: []
};
('IntersectionObserver' in window) || window.PolyPoly.features.push('IntersectionObserver');
</script>
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/polymer#^1.4.0
- poly-poly#CaptainCodeman/poly-poly#^0.0.4
- Released
- 2017-03-06
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Browser
- Browser Independent
lazy-img - Vaadin Add-on Directory
Lazy loading imgGitHub Homepage
View on GitHub
lazy-img version 0.0.1
### Dependencies
* polymer#Polymer/polymer#^1.4.0
lazy-img version 0.0.2
### Dependencies
* polymer#Polymer/polymer#^1.4.0
lazy-img version 0.0.3
### Dependencies
* polymer#Polymer/polymer#^1.4.0
* poly-poly#CaptainCodeman/poly-poly#^0.0.1
lazy-img version 0.0.4
### Dependencies
* polymer#Polymer/polymer#^1.4.0
* poly-poly#CaptainCodeman/poly-poly#^0.0.3
lazy-img version 0.0.5
### Dependencies
* polymer#Polymer/polymer#^1.4.0
* poly-poly#CaptainCodeman/poly-poly#^0.0.4
lazy-img version 0.0.6
### Dependencies
* polymer#Polymer/polymer#^1.4.0
* poly-poly#CaptainCodeman/poly-poly#^0.0.4
lazy-img version 0.0.7
### Dependencies
* polymer#Polymer/polymer#^1.4.0
* poly-poly#CaptainCodeman/poly-poly#^0.0.4