Directory

← Back

lazy-img

Lazy loading img

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/CaptainCodeman/lazy-img on 2019-05-10 ]

Published on webcomponents.org

Demo and API docs

<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

(Loading compatibility data...)

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
Online