Ng-lazyload-image: 기능 요청 : 관찰 가능한 생성에서 이미지에 대한 액세스 권한 얻기

동기 부여 및 구현

지금은 라이브러리를 확장하는 좋은 방법 인 Observable을 전달할 수 있습니다. 그러나 사용이 간단한 방법으로 이미지에 액세스 할 수 없기 때문에 약간 제한적입니다.

가장 일반적인 문제 중 하나는 사용자가 창을 사용하여 스크롤하지 않거나 추가 스크롤 레이어 (예 : ionic, ng material design 등)를 추가하는 3 부분 라이브러리를 사용하지 않는 경우이며 때로는 찾기 어려울 수 있습니다. 실제로 스크롤되는 요소. 이를 해결하는 한 가지 방법은 Intersection Observer 를 사용하는 것입니다 (성능 향상도 제공 할 수 있음). 예 :

@Component({
  selector: 'intersection-observer',
  template: `<img #img [defaultImage]="defaultImage" [lazyLoad]="image" [scrollObservable]="subject">`,
})
export class IntersectionObserverComponent {
  @ViewChild('img') img;
  subject = new Subject();
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';

  ngAfterViewInit() {
    const config = {
      rootMargin: '50px 50px',
      threshold: 0.01
    };

    function onIntersection(entries) {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          observer.unobserve(entry.target);
          this.subject.next();
        }
      });
    }
    const observer = new IntersectionObserver(onIntersection, config);
    observer.observe(this.img.nativeElement);
  }
}

그러나 이것은 매우 번거 롭습니다.

우리가 할 수있는 것은 함수를 scrollObservable 로 받아들이는 것입니다.

if (!this.scrollObservable) {
  const windowTarget = isWindowDefined() ? window : undefined;
  scrollObservable = getScrollListener(this.scrollTarget || windowTarget);
} else if (typeof this.scrollObservable === 'function') {
  scrollObservable = this.scrollObservable(image, offset) // and maybe more
} else {
  scrollObservable = this.scrollObservable.startWith('');
}

위의 구성 요소를 다음과 같이 다시 작성할 수 없습니다.

@Component({
  selector: 'intersection-observer',
  template: `<img [defaultImage]="defaultImage" [lazyLoad]="image"
 [scrollObservable]="startLazyload" offest="50">`,
})
export class IntersectionObserverComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';

  startLazyload(image, offset) {
    Observable.create(observer => {
      const intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.intersectionRatio > 0) {
            observer.next();
          }
        });
      }, {
        rootMargin: offset ? `${offset}px` : undefined,
        threshold: 0.01
      });
      intersectionObserver.observe(image);
      return () => observer.unobserve(image);
    });
  }
}

특히 사용자가 모든 이미지에 IntersectionObserver 를 사용하려는 경우 더 좋지만 여전히 약간 시끄 럽습니다.

이 문제를 해결하는 방법은 NgModule 의 기본 Observable을 너무 전달하는 것입니다.

import { intersectionObserverLazyLoad } from 'some-place';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, lazyLoadImage({
      observable: intersectionObserverLazyLoad
    })],
    bootstrap: [ AppComponent ]
})
export class MyAppModule {}

위의 구성 요소를 다음과 같이 다시 작성할 수 없습니다.

@Component({
  selector: 'intersection-observer',
  template: `<img [defaultImage]="defaultImage" [lazyLoad]="image" offest="50">`,
})
export class IntersectionObserverComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';
}

NgModule에서 기본 함수를 전달하는 기능은 isVisible 및 loadImage 대한 사용자 지정 함수를 생성 할 수있는 기회를 열어 줄 수 있지만 이는 이후 이야기입니다.

해결 방법 : # 287, # 195, # 286, # 285, # 275, # 259 등. 대부분의 문제는 다른 방법으로 해결되지만 Observable을 만들 때 사용자에게 더 많은 유연성을 제공 할 수 있다면 좋을 것입니다.

@sapierens , @rimlin 어떻게 생각하세요?