Ng-lazyload-image: 지연 로드 이미지가 사전 부팅에서 작동하지 않음

안녕하세요 @lares83 ,

알려 줘서 고마워. 이미지가 언제 표시되는지 알 수 있는 방법이 없기 때문에 이것은 매우 까다로운 문제입니다.

빠른 수정은 제안한 대로 offset=1 를 설정하는 것이지만 뷰포트에 없는 경우에도 표시될 때 모든 이미지가 로드됩니다. 이는 ng-lazyload-image 가 이미지가 표시되기 전에 이미지가 어디에 있는지 알 수 있는 방법이 없고 그 당시에는 너무 늦기 때문입니다(사용자가 스크롤할 때까지 새 이벤트를 받지 못함).

이를 수정하는 한 가지 방법은 PrebootComplete 이벤트를 수신하는 것입니다.

constructor() {
  this.scrollAndPrebootComplete$ = Observable.merge(
    Observable.fromEvent(window, 'scroll'),
    Observable.fromEvent(window, 'PrebootComplete')
  );
}

그런 다음 템플릿에서:

<img [lazyLoad]="lazyLoadImage" [scrollObservable]="scrollAndPrebootComplete$" />

당신은 쉽게 래핑 사용자 정의 구성 요소를 만들 수 lazyLoad 와 함께 통과 scrollAndPrebootComplete$ .

또 다른 해결책은 IntersectionObserver 것이지만 해결하려면 #304가 필요합니다.

빠른 해결 방법은 offset 속성을 예를 들어 1로 설정하여 intersectsWith가 true를 반환하도록 하는 것입니다.

그것은 실제로 버그입니다. 발생해서는 안됩니다. 나는 그것에 대해 별도의 문제를 열 ​​것입니다.

나는 이것을 닫는다. 위에서 제안한 솔루션이 작동하지 않았다는 것을 알려주십시오.