Ng-lazyload-image: 뷰포트에 나타나는 이미지 로드

이상하게 들리네요. 어떤 버전의 ng-lazyload-image 를 사용하고 있습니까? 어떤 브라우저를 사용하고 있습니까? 이것은 다른 브라우저(firefox/chrome/safari/edige/ios/android)에서도 동일한 동작입니까? 스크롤을 시작할 때까지 이미지가 로드되지 않았습니까?
오류를 재현하기 위해 작은 저장소를 만들 수 있습니까? 아니면 gif/동영상을 녹화하시겠습니까?

Chrome, Firefox 및 Edge에서 동일한 문제가 있습니다. 지연 로드된 이미지가 있는 구성 요소에서 [hidden](기본적으로 true)을 사용하고 있습니다.
숨김이 false로 변경되면 구성 요소는 렌더링되지만 이미지는 기본(로더)이고 스크롤만 이미지를 표시합니다.

구성 요소의 내 img 태그:

<img [lazyLoad]="recipe.image"
          [offset]="100"
          src="ng-assets/animations/recipe-loader.gif">

그리고 내 구성 요소 :

<app-recipe *ngFor="let recipe of recipes; let i = index;"
                     [hidden]="activeRecipeIndex !== i"
                     [recipe]="recipe">
</app-recipe>

안녕하세요 @zieka ,

문제는 ng-lazyload-image 가 시작될 때 이미지가 숨겨져 뷰포트 외부에서 이미지를 위협한다는 것입니다(이미지에는 위치가 없고 렌더링되지 않고 언제 표시되는지 알 방법이 없습니다. 뷰포트에 있는지 다시 확인).

그러나 이를 해결하는 세 가지 방법이 있습니다.

1. IntersectionObserver 사용(권장 방법)
   모듈에 intersectionObserverPreset 를 추가하기만 하면 됩니다.

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';

...
LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
})
...

1. 숨김 대신 보이는 것을 사용하십시오. 이미지가 표시되지 않는 경우 이미지가 여전히 해당 위치에 있는 경우.
2. 스크롤 이벤트와 activeRecipeIndex (귀하의 경우)를 변경하는 이벤트를 병합하는 자신만의 scrollObservable 를 만듭니다. 원하시면 도와드릴 수 있습니다.

안녕하세요, @tjoskar 저는 [offset]=800 를 사용하여 이 문제를 해결 했지만 이것이 해결하는 가장 적절한 방법인지 잘 모르겠습니다. 어떻게 생각하시나요?

감사합니다 @tjoskar 작동합니다 :) 첫 번째 옵션을 선택합니다 :)