Table of Contents
Description
This is a base class like Component but the render
method is not called until the element is visible (in the view), a skeleton is rendered until then.
Basic Usage
Extend the LazyComponent
class to create a lazy-loaded component. The component will render its content only when it becomes visible in the viewport.
import LazyComponent from 'kempo';
class MyLazyComponent extends LazyComponent {
constructor(){
super();
// Your Constructor
}
async render(force){
if(await super.render(force)){
// Your render logic
return true;
}
return false;
}
}
window.customElements.define('my-lazy-component', MyLazyComponent);
JavaScript Reference
Constructor
Extends Component
new LazyComponent()
new LazyComponent(Object shadowOptions)
This class cannot be instantiated directly, but rather should be extended, optionally passing in the shadowOptions.
Requirements
Attributes
unrender: boolean
If set to true
, the component will unrender its content when it goes out of view.
Methods
async renderSkelton(): Promise
Renders the skeleton template of the component. This is called when the component is not yet visible in the viewport or when it goes out of view and unrender
is set to true
.
async inViewCallback(): Promise
Callback method that is called when the component becomes visible in the viewport. By default, it calls the render
method.
async outOfViewCallback(): Promise
Callback method that is called when the component goes out of view. If unrender
is set to true
, it calls the renderSkelton
method.