рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рдкрд░реАрдХреНрд╖рдг рдЪрд▓рд╛рддреЗ рд╕рдордп рд╡реЗ рдЖрд▓рд╕реА рд▓реЛрдб рдирд┐рд░реНрджреЗрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХрд┐рд╕реА рднреА рдШрдЯрдХ рдкрд░ рдЯрд╛рдЗрдордЖрдЙрдЯ рдХрд░реЗрдВрдЧреЗред рдкреНрд░реЛрдЯреИрдХреНрдЯрд░ рдПрдирдЬреАрдЬрд╝реЛрди рдХреЛ рдпрд╣ рдЬрд╛рдирдиреЗ рдХреЗ рд▓рд┐рдП рджреЗрдЦрддрд╛ рд╣реИ рдХрд┐ рдЪрд▓рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд▓рдВрдмрд┐рдд xhr рдХреЙрд▓, рдЯрд╛рдЗрдордЖрдЙрдЯ рдФрд░ рдЕрдВрддрд░рд╛рд▓ рдХрдм рдкреВрд░рд╛ рд╣реЛ рдЧрдпрд╛ рд╣реИред
scroll-listener.ts
рдореЗрдВ .sampleTime(100, scheduler)
рдПрдХ рдЕрдВрддрд░рд╛рд▓ рдмрдирд╛рддрд╛ рд╣реИ рдЬреЛ рдПрдХ рдЪрд╛рдВрджрд╛ рдкрд░реАрдХреНрд╖рдг рдХреЗ рджреМрд░рд╛рди рдХрднреА рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рд╣реЛрдЧрд╛ред рдирд┐рд░реНрджреЗрд╢ рдореЗрдВ рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреЛрдб рдЬреЛрдбрд╝рдХрд░ рдореБрдЭреЗ рдЗрд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рд░рд╛рд╕реНрддрд╛ рдорд┐рд▓ рдЧрдпрд╛:
ngAfterContentInit() {
this.ngZone.runOutsideAngular(() => { // run outside angular
this.scrollSubscription = getScrollListener(this._scrollTarget)
.filter(() => this.isVisible())
.take(1)
.switchMap(() => this.loadImage(this.lazyImage))
.do(() => this.setImage(this.lazyImage))
.finally(() => this.setLoadedStyle())
.subscribe(() => this.ngOnDestroy(),
error => {
this.setImage(this.errorImg || this.defaultImg);
this.ngOnDestroy();
});
});
}
рдЗрд╕рдХреЗ рдЕрдиреБрд╕рд╛рд░ https://github.com/angular/protractor/issues/3349#issuecomment -232253059 рдЪрд╛рдВрджрд╛ рдореБрдЦреНрдп ngZone рдХреЛ рджреЗрдЦрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрджрд┐ рд╣рдо рдЗрд╕рдХреЗ рдЕрдВрддрд░рд╛рд▓ рдХреЛ рдЪрд▓рд╛рддреЗ рд╣реИрдВ рддреЛ рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЪрд▓рддрд╛ рд╣реИред рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдЗрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдкрд░ рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рдкрд░реАрдХреНрд╖рдгреЛрдВ рдХреЗ рд╕рд╛рде рдХреИрд╕реЗ рдХрд╛рдо рдХрд░реЗрдЧрд╛, рд▓реЗрдХрд┐рди рдЬрдм рдореБрдЭреЗ рдореМрдХрд╛ рдорд┐рд▓рддрд╛ рд╣реИ рддреЛ рдореИрдВ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред
рдЖрдкрдХреА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред
рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореИрдВ рдЗрд╕реЗ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ред рдореИрдВ рдЗрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ рдЪрд╛рдВрджрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ рдФрд░ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рддреЗрдЬреА рд╣реИред рд▓реЗрдХрд┐рди рдРрд╕рд╛ рдХрд╣рдиреЗ рдХреЗ рдмрд╛рдж, рдкреНрд░рджрд░реНрд╢рди рд╕реБрдзрд╛рд░ рдХреЗ рд▓рд┐рдП ngZone.runOutsideAngular
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдЕрдЧрд░ рд╣рдо ngZone.runOutsideAngular
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рд╣рдореЗрдВ рдЫрд╡рд┐ рдХреЛ рдЖрд▓рд╕реА рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж ChangeDetectorRef
рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рд╣реИ рдирд╛? рдЗрддрдирд╛ рдХреЛрдгреАрдп рдЬрд╛рдирддрд╛ рд╣реИ рдХрд┐ рджреГрд╢реНрдп рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред
рдЪреВрдВрдХрд┐ рдореИрдВ рдЗрд╕реЗ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рдФрд░ рдпрд╣ рд╕реАрдо рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдПрдХ рдХрд╛рдордХрд╛рдЬреА рд╕рдорд╛рдзрд╛рди рд╣реИред рдХреНрдпрд╛ рдЖрдк рдПрдХ рдкреАрдЖрд░ рдЬрдорд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?
рдЬрд╝рд░реВрд░, рдореИрдВ рджреЗрдЦреВрдВрдЧрд╛ рдХрд┐ рдХреНрдпрд╛ рдореБрдЭреЗ рдЕрдЧрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдореЗрдВ рдПрдХ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ :)
рдореИрдВрдиреЗ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдПрдХ рдирдпрд╛ рд╕рдВрд╕реНрдХрд░рдг рдмрдирд╛рдпрд╛ рд╣реИред рдХреНрдпрд╛ рдЖрдк рдЗрд╕реЗ рдЖрдЬрд╝рдорд╛ рд╕рдХрддреЗ рд╣реИрдВ: npm install [email protected]
рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдХреНрдпрд╛ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдХреЛ рдареАрдХ рдХрд░рддрд╛ рд╣реИ?
рдЬрд╝рд░реВрд░! рдореИрдВ рдЖрдЬ рдЗрд╕реЗ рдЖрдЬрдорд╛рдКрдВрдЧрд╛
рдЗрд╕рдХреЛ рдмрдВрдж рдХрд░рдирд╛ред рдЕрдЧрд░ рдЖрдкрдХреЛ рдЕрднреА рднреА рдЯрд╛рдЗрдордЖрдЙрдЯ рдорд┐рд▓рддрд╛ рд╣реИ рддреЛ рдореБрдЭреЗ рдмрддрд╛рдПрдВред
@tjoskar рдиреЗ рдЖрдЬ рд╣реА рдЗрд╕рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ рдФрд░ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдлрд┐рдХреНрд╕ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! :)
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдЬрд╝рд░реВрд░, рдореИрдВ рджреЗрдЦреВрдВрдЧрд╛ рдХрд┐ рдХреНрдпрд╛ рдореБрдЭреЗ рдЕрдЧрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдореЗрдВ рдПрдХ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ :)