Ng-lazyload-image: 각도기 μ‹œκ°„ 초과

에 λ§Œλ“  2016λ…„ 12μ›” 06일  Β·  7μ½”λ©˜νŠΈ  Β·  좜처: tjoskar/ng-lazyload-image

각도기 ν…ŒμŠ€νŠΈλ₯Ό μ‹€ν–‰ν•  λ•Œ 지연 λ‘œλ“œ μ§€μ‹œλ¬Έμ„ μ‚¬μš©ν•˜λŠ” λͺ¨λ“  ꡬ성 μš”μ†Œμ—μ„œ μ‹œκ°„μ΄ μ΄ˆκ³Όλ©λ‹ˆλ‹€. κ°λ„κΈ°λŠ” μ‹€ν–‰ 전에 보λ₯˜ 쀑인 xhr 호좜, μ‹œκ°„ 초과 및 간격이 μ™„λ£Œλ  λ•Œλ₯Ό μ•ŒκΈ° μœ„ν•΄ ngZone을 κ°μ‹œν•©λ‹ˆλ‹€.
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 λ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. κ·Έλ ‡μ£ ? λ”°λΌμ„œ AngularλŠ” λ·°λ₯Ό λ‹€μ‹œ λ Œλ”λ§ν•΄μ•Ό ν•œλ‹€λŠ” 것을 μ•Œκ³  μžˆμŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” 이것을 μž¬ν˜„ ν•  μˆ˜μ—†κ³  당신이 μž‘λ™ν•˜λŠ” μ†”λ£¨μ…˜μ„ 가지고 있기 λ•Œλ¬Έμ— μ΄μŒμƒˆκ°€ μžˆμŠ΅λ‹ˆλ‹€. PR을 μ œμΆœν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?

λ¬Όλ‘ , λ‹€μŒ μ£Ό μ•ˆμ— 받을 수 μžˆλŠ”μ§€ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. :)

ν”ŒλŸ¬κ·ΈμΈμ˜ μƒˆ 버전을 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. npm install [email protected] 을 μ‚¬μš©ν•΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜λŠ”μ§€ 확인할 수 μžˆμŠ΅λ‹ˆκΉŒ?

ν™•μ‹ ν•˜λŠ”! λ‚˜λŠ” 였늘 그것을 μ‹œλ„ ν•  것이닀

λ‹«μŠ΅λ‹ˆλ‹€. μ—¬μ „νžˆ μ‹œκ°„ μ΄ˆκ³Όκ°€ λ°œμƒν•˜λ©΄ μ•Œλ €μ£Όμ‹­μ‹œμ˜€.

@tjoskarλŠ” 였늘 이것을 ν…ŒμŠ€νŠΈν–ˆκ³  μž‘λ™ν•©λ‹ˆλ‹€. μˆ˜μ •ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€! :)

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰