Lazily load parts of a webpage as soon as they appear in the screen.
Include the following <script> tag in the <head> of your document:
<script src="https://unpkg.com/lazy-fragment-element"></script>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'<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.
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge