Ng-lazyload-image: рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рдЯрд╛рдЗрдордЖрдЙрдЯреНрд╕

рдХреЛ рдирд┐рд░реНрдорд┐рдд 6 рджрд┐рд╕ре░ 2016  ┬╖  7рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: tjoskar/ng-lazyload-image

рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рдкрд░реАрдХреНрд╖рдг рдЪрд▓рд╛рддреЗ рд╕рдордп рд╡реЗ рдЖрд▓рд╕реА рд▓реЛрдб рдирд┐рд░реНрджреЗрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХрд┐рд╕реА рднреА рдШрдЯрдХ рдкрд░ рдЯрд╛рдЗрдордЖрдЙрдЯ рдХрд░реЗрдВрдЧреЗред рдкреНрд░реЛрдЯреИрдХреНрдЯрд░ рдПрдирдЬреАрдЬрд╝реЛрди рдХреЛ рдпрд╣ рдЬрд╛рдирдиреЗ рдХреЗ рд▓рд┐рдП рджреЗрдЦрддрд╛ рд╣реИ рдХрд┐ рдЪрд▓рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд▓рдВрдмрд┐рдд 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 рдХреЛ рджреЗрдЦрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрджрд┐ рд╣рдо рдЗрд╕рдХреЗ рдЕрдВрддрд░рд╛рд▓ рдХреЛ рдЪрд▓рд╛рддреЗ рд╣реИрдВ рддреЛ рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЪрд▓рддрд╛ рд╣реИред рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдЗрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдкрд░ рдкреНрд░реЛрдЯреНрд░реИрдХреНрдЯрд░ рдкрд░реАрдХреНрд╖рдгреЛрдВ рдХреЗ рд╕рд╛рде рдХреИрд╕реЗ рдХрд╛рдо рдХрд░реЗрдЧрд╛, рд▓реЗрдХрд┐рди рдЬрдм рдореБрдЭреЗ рдореМрдХрд╛ рдорд┐рд▓рддрд╛ рд╣реИ рддреЛ рдореИрдВ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЬрд╝рд░реВрд░, рдореИрдВ рджреЗрдЦреВрдВрдЧрд╛ рдХрд┐ рдХреНрдпрд╛ рдореБрдЭреЗ рдЕрдЧрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдореЗрдВ рдПрдХ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ :)

рд╕рднреА 7 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЖрдкрдХреА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред
рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореИрдВ рдЗрд╕реЗ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ред рдореИрдВ рдЗрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ рдЪрд╛рдВрджрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ рдФрд░ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рддреЗрдЬреА рд╣реИред рд▓реЗрдХрд┐рди рдРрд╕рд╛ рдХрд╣рдиреЗ рдХреЗ рдмрд╛рдж, рдкреНрд░рджрд░реНрд╢рди рд╕реБрдзрд╛рд░ рдХреЗ рд▓рд┐рдП ngZone.runOutsideAngular рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдПрдХ рдЕрдЪреНрдЫрд╛ рд╡рд┐рдЪрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдЕрдЧрд░ рд╣рдо ngZone.runOutsideAngular рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рд╣рдореЗрдВ рдЫрд╡рд┐ рдХреЛ рдЖрд▓рд╕реА рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж ChangeDetectorRef рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рд╣реИ рдирд╛? рдЗрддрдирд╛ рдХреЛрдгреАрдп рдЬрд╛рдирддрд╛ рд╣реИ рдХрд┐ рджреГрд╢реНрдп рдХреЛ рдлрд┐рд░ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рдЪреВрдВрдХрд┐ рдореИрдВ рдЗрд╕реЗ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ рдФрд░ рдпрд╣ рд╕реАрдо рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдПрдХ рдХрд╛рдордХрд╛рдЬреА рд╕рдорд╛рдзрд╛рди рд╣реИред рдХреНрдпрд╛ рдЖрдк рдПрдХ рдкреАрдЖрд░ рдЬрдорд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?

рдЬрд╝рд░реВрд░, рдореИрдВ рджреЗрдЦреВрдВрдЧрд╛ рдХрд┐ рдХреНрдпрд╛ рдореБрдЭреЗ рдЕрдЧрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдореЗрдВ рдПрдХ рдорд┐рд▓ рд╕рдХрддрд╛ рд╣реИ :)

рдореИрдВрдиреЗ рдкреНрд▓рдЧрдЗрди рдХрд╛ рдПрдХ рдирдпрд╛ рд╕рдВрд╕реНрдХрд░рдг рдмрдирд╛рдпрд╛ рд╣реИред рдХреНрдпрд╛ рдЖрдк рдЗрд╕реЗ рдЖрдЬрд╝рдорд╛ рд╕рдХрддреЗ рд╣реИрдВ: npm install [email protected] рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдХреНрдпрд╛ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдХреЛ рдареАрдХ рдХрд░рддрд╛ рд╣реИ?

рдЬрд╝рд░реВрд░! рдореИрдВ рдЖрдЬ рдЗрд╕реЗ рдЖрдЬрдорд╛рдКрдВрдЧрд╛

рдЗрд╕рдХреЛ рдмрдВрдж рдХрд░рдирд╛ред рдЕрдЧрд░ рдЖрдкрдХреЛ рдЕрднреА рднреА рдЯрд╛рдЗрдордЖрдЙрдЯ рдорд┐рд▓рддрд╛ рд╣реИ рддреЛ рдореБрдЭреЗ рдмрддрд╛рдПрдВред

@tjoskar рдиреЗ рдЖрдЬ рд╣реА рдЗрд╕рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ рдФрд░ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдлрд┐рдХреНрд╕ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! :)

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

rimlin picture rimlin  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

myrsk picture myrsk  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AzerHeshim picture AzerHeshim  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

alisahinozcelik picture alisahinozcelik  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

tjoskar picture tjoskar  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ