lazy-fragment-element
v1.0.2
Published
Lazily load parts of a webpage as soon as they appear in the screen.
Downloads
2
Readme
<lazy-fragment> element
Lazily load parts of a webpage as soon as they appear in the screen.
Installation
CDN
Include the following <script>
tag in the <head>
of your document:
<script src="https://unpkg.com/lazy-fragment-element"></script>
NPM
You can also install using a package manager.
npm install lazy-fragment-element
// Or
yarn add lazy-fragment-element
And then import as a module:
import 'lazy-fragment-element'
Markup
<lazy-fragment src="/lazy-part-from-server">Loading...</lazy-fragment>
The element will be entirely replaced by the HTML fragment returned by the server as soon it appears on the screen (scrolling or showing with the css property display
in a parent element).
You can also defer the loading by using the disabled
attribute and removing it later.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge