Ng-lazyload-image: 이미지로드를 수동으로 트리거하려면 어떻게해야합니까?

안녕하세요 @philipgiuliani ,

문제는 ng-lazyload-image 는 사용자가 스크롤 할 때 이미지가 뷰포트에 있는지 만 확인한다는 것입니다. 스크롤 이벤트가없는 한 ng-lazyload-image 는 아무것도하지 않습니다.

따라서 사용 사례를 해결하려면 주변 세상이 변경되었음을 ng-lazyload-image 알려야합니다. 이를 수행하는 두 가지 방법이 있습니다.

1. 스크롤 이벤트를 발생시킵니다. 이것은 이미지가 뷰포트에 있는지 여부를 재확인하기 위해 ng-lazyload-image 를 속일 것입니다. 그러나 그의 해결책은 예쁘지 않습니다.
2. 스크롤 이벤트로 자신 만의 스트림을 만들고 맞춤 이벤트와 병합 :

// In your component

constructor() {
  this.updateSearchResult$ = new Subject();
  this.scrollAndSearch$ = Observable.merge(
    Observable.fromEvent(window, 'scroll')
    this.updateSearchResult$
  );
}

onSerachResultResponse() {
  this.updateSearchResult$.next()
}

// in your template
<img [lazyLoad]="lazyLoadImage" [customObservable]="scrollAndSearch$" />

이것이 귀하의 질문에 대한 답변입니까?

비슷한 문제에 대한 해결책을 찾고 있었고 공유하고 싶습니다.이 문제가 사람들이 아마 찾을 수있는 곳이라고 생각하기 때문입니다.

문제점 : 오프셋 내에서 보이지 않더라도 지연 후 이미지로드
솔루션 : 고정 오프셋 대신 오프셋 값에 대한 Observable을 생성하고 원하는 시간 후에 정말 높은 오프셋을 설정합니다.

// in the Angular 2+ component
constructor () {
  this.imageLoadOffset$ = Observable.merge(
    Observable.of(300),                 // initial offset
    Observable.of(100000).delay(5000)   // offset triggering loading after 5 seconds
  );
}

// in the template
<img [lazyLoad]="'foo.png'" [offset]="imageLoadOffset$ | async" />

기여해 주셔서 감사합니다. Readme 파일에이 문제에 대한 링크를 추가했습니다.

컨테이너를 빠르게 스크롤하면 스크롤 된 이미지가로드되지 않고 스크롤 후 현재 뷰포트에 이미지가로드됩니다. 어떻게해야합니까? ?

@pangshangggg , 죄송하지만 이해가 안 돼요. Google 번역을 사용하려고했지만 질문을 이해하지 못했습니다 : / 영어로 쓸 수 있습니까?

Ionic 2/3에서는 사용자가 스크롤을 시작할 때까지 이미지가로드되지 않습니다. 두 가지 방법으로이 문제를 해결할 수 있습니다.
가장 추악한 방법은 다음과 같습니다.

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

그리고 이것이 좋은 방법입니다.

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [customObservable]="loadAndScroll" )

위에 게시 된 솔루션을 ionic으로 바 꾸었습니다. 더 이상 :)

Angular 6 및 rxjs 6에서 이전 예제를 따라 스크롤 이벤트에 의한 지연로드를 수동으로 트리거하려고했지만 작동하지 않습니다. 페이지를 스크롤하지 않고 모든 이미지가 차례로로드됩니다. 이것은 내 코드입니다.

주형:

<div *ngFor="let image of images">
    <img [defaultImage]="defaultImage"
    [lazyLoad]="image"
    [useSrcset]="true"
    [offset]="offset" [scrollObservable]="scrollObservable" >
</div>

구성 요소:
scrollObservable = fromEvent(window, 'scroll');

el-Davo가 Angular 5의 문제를 해결한다고 말한 224 호에서이 예제를 따랐습니다.

Ionic 2/3에서는 사용자가 스크롤을 시작할 때까지 이미지가로드되지 않습니다. 두 가지 방법으로이 문제를 해결할 수 있습니다.
가장 추악한 방법은 다음과 같습니다.

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

그리고 이것이 좋은 방법입니다.

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [scrollObservable]="loadAndScroll" )

위에 게시 된 솔루션을 ionic으로 바 꾸었습니다. 더 이상 :)

죄송하지만 문제가 있습니다.
this.contentLoaded.next ();
작동 안함
스크롤 할 때만 잘 작동합니다.
???

안녕하세요 @zarinara ,
not working 라고 말하면 오류가 발생합니까?

안녕하세요
오류가 발생하지 않음

@zarinara 님 , 새 이슈를 생성하고 몇 가지 코드 예제와 ng-lazyload-image ( npm ls ng-lazyload-image )의 버전 번호를 포함 할 수 있습니까? intersectionObserver 있습니까?