1.0.3 • Published 4 years ago
ngx-request-idle v1.0.3
Demo
You can see the real example in this stackblitz
Installation instructions
Install ngx-request-idle
from npm
:
npm install ngx-request-idle
or
yarn add ngx-request-idle
Add needed package to NgModule imports:
import { RequestIdleModule } from 'ngx-request-idle';
@NgModule({
...
imports: [RequestIdleModule.forRoot(),...]
...
})
Content
This package contains a service and a custom preload strategy.
RequestIdle (service)
- callback() -> Queues a function to be called during a browser's idle periods.
- requestAnimationFrame() -> this method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.
RequestIdlePreloadAllModules (Preload Strategy)
- This strategy combines the 2 methods of the requestidle service to ensure a preload without blockages
Usage
requestIdleCallback
import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
...
constructor(private _requestIdle: RequestIdle) { }
ngOnInit() {
this._requestIdle.callback(() => { // Whatever you need });
}
...
}
requestAnimationFrame
import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
...
constructor(private _requestIdle: RequestIdle) { }
ngOnInit() {
this._requestIdle.requestAnimationFrame(() => { // Whatever you need });
}
...
}
RequestIdlePreloadAllModules
import { RequestIdlePreloadAllModules } from "ngx-request-idle";
...
imports: [
RouterModule.forRoot(routes, {
// Custom strategy to improve performance when loading lazy-load modules
preloadingStrategy: RequestIdlePreloadAllModules
}),
...
]
...