1.0.2 • Published 1 year ago
lazy-fragment-element v1.0.2
<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-elementAnd 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