Lazy load iframes using web components! #usetheplatform
MIT License
lazy-iframe is a web component built with stencil that lets you lazy load iframes as the user scrolls over them. It uses the intersectionObserver to achieve this functionality. This can be handy for embedding youtube videos, ads that work through an iframe etc.
lazy-iframe exposes two css variables to enable easy styling of the iframe. Here is a usage example:
// in your apps css
:root {
--iframe-width: 100px;
--iframe-height: 100px;
}
<lazy-iframe src='https://www.youtube.com/embed/UfD-k7aHkQE' title='ionic and stencil'></lazy-iframe>
<script src='https://unpkg.com/[email protected]/dist/lazyiframe.js'></script>
in the head of your index.htmlnpm install my-name --save
<script src='node_modules/lazy-iframe/dist/lazyiframe.js></script>
in the head of your index.htmlnpm install lazy-iframe --save
{ name: 'lazy-iframe' }
to your collections