Web Component built with Stencil to lazy load images
Switch branches/tags
Nothing to show
Clone or download
Latest commit d9c2e51 Jan 22, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist chore(): udpate Jan 22, 2018
scripts update Sep 5, 2017
src chore(): udpate Jan 22, 2018
.gitignore rename Sep 1, 2017
LICENSE Initial commit Jul 7, 2017
package-lock.json chore(): update to latest stencil Dec 4, 2017
package.json chore(): update to latest stencil Dec 4, 2017
readme.md chore(): update readme Sep 15, 2017
stencil.config.js chore(): update to latest stencil Dec 4, 2017
tsconfig.json init to win it Jul 7, 2017



Built With Stencil

What is it?

st-img is a web component built with Stencil that allows you to lazy load images as the user scrolls them into the viewport. On supported browsers (Chrome and chrome based browsers, Firefox and Edge) it uses IntersectionObserver to accomplish this functionality. For Safari and IE it simply falls back to setTimeout.


To use this component in your app, no matter what framework you are using, follow these steps:

  • pop this script tag <script async defer src='https://unpkg.com/st-img@0.1.1/dist/stimg.js'></script> into your index.html




 <st-img src="https://madeby.google.com/static/images/google_g_logo.svg" alt="google"></st-img>