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);
In-View Interval Timeout
In addition to using intersection observes to watch for components being scrolled into view, an interval is used to check if the component suddenly become visible via a display style change to itself or a parent. The timeout of the interval can be set for all instances of your LazyComponent by chaning the static member inViewIntervalTimeout
.
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;
}
static inViewIntervalTimeout = 200; // Change the inView checking interval to 200ms instead of the default 1000
}
window.customElements.define('my-lazy-component', MyLazyComponent);
Individal Component interval timer overwrites
You can overwrite this interval timeout for individual elements by setting the in-view-interval
attribute.
<my-lazy-component in-view-interval="5000">
<!-- The interval to check if it is in-view (due to element/parent visibility change) is now set to check every 5 seconds -->
</my-lazy-component>
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.