LazyImg
is a functional Stencil component for loading img
tags lazily. It it heavily inspired by Justin Willis' st-img
.
To start building a new web component using Stencil, clone this repo to a new directory:
git clone https://github.com/ionic-team/stencil-component-starter.git lazyimg
cd lazyimg
git remote rm origin
and run:
npm install
npm start
To build the component for production, run:
npm run build
- Publish to NPM
- Put a script tag similar to this
<script src='https://unpkg.com/[email protected]/dist/lazyimg.js'></script>
in the head of your index.html - Then you can use the element anywhere in your JSX
- Run
npm install lazyimg --save
- Put a script tag similar to this
<script src='node_modules/lazyimg/dist/lazyimg.js'></script>
in the head of your index.html - Then you can use the element anywhere in your JSX
- Run
npm install lazyimg --save
- Add an import to the npm packages
import lazyimg;
- Then you can use the element anywhere in your JSX
<p>Basically just text.</p>
<LazyImg src='https://media.giphy.com/media/l0Iy1B7kYsicYAOU8/giphy.gif' />
<p>Basically just text.</p>