Skip to content

Instantly share code, notes, and snippets.

Avatar

Bob Lee bob-lee

View GitHub Profile
View lazyload-polyfill.json
"scripts": [
"src/intersection-observer.js"
]
View lazyload-ng-for-loop.html
<div class="list" [@listChild]="noteService.listState">
<my-note class="item" #myNote
*ngFor="let note of noteService.items$ | async; let i = index"
(lazyLoad)="myNote.doLoad($event,i)" [url]="note.imageURL" [index]="i">
</my-note>
</div>
View lazyload2.service.ts
export class LazyLoadService {
// ...
private _loadAheadCount = 2; // default 2
get loadAheadCount() { return this._loadAheadCount; }
set loadAheadCount(value: number) {
this._loadAheadCount = value;
}
// announce intersecting index to [lazyLoad] directives
View lazyload3.directive.ts
export class LazyLoadDirective implements AfterViewInit, OnDestroy {
// ...
@Input() index = -1;
public ngAfterViewInit() {
// ...
if (this.index !== -1) { // if [index] given, listen to intersecting index
const sub = this._service.announcedIntersection.subscribe(params => {
View lazyload2.directive.ts
export class LazyLoadDirective implements AfterViewInit, OnDestroy {
private _url = '';
@Input()
set url(value: string) { // optional
if (!this._url && value) { // url added runtime
this.doRegister();
}
this._url = value;
}
View lazyload-parent1.component.ts
ngOnInit() { // parent component creation
// ...
this.lazyLoadService.registerAfter(1500);
}
View lazyload1.directive.ts
export class LazyLoadDirective implements AfterViewInit, OnDestroy {
public ngAfterViewInit() {
if (this._service.delayMsec > 0) { // register later
const sub = this._service.announcedOrder.pipe(first()).subscribe(_ => this.doRegister());
this._subscription.add(sub);
} else { // register now (default)
this.doRegister();
}
}
View lazyload1.service.ts
export class LazyLoadService {
delayMsec = 0;
// announce order to [lazyLoad] directives
private order$ = new Subject<string>();
announcedOrder = this.order$.asObservable();
announceOrder(name: string) {
this.order$.next(name);
}
View ng-for-loop.html
<div class="list" [@listChild]="noteService.listState">
<my-note class="item"
*ngFor="let note of noteService.items$ | async">
</my-note>
</div>
View react.hoc.js
// Work.js
import withObserver from './withObserver'
import Images from './Images'
const ImagesWithObserver = withObserver(Images)
export default ImagesWithObserver
// withObserver.js (HOC composing Observer and wrapped components)
import React from 'react';
You can’t perform that action at this time.