Skip to content

Instantly share code, notes, and snippets.

Bob Lee bob-lee

Block or report user

Report or block bob-lee

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.