Ng-lazyload-image: загружать изображения, которые появляются в области просмотра

Звучит странно. Какую версию ng-lazyload-image вы используете? Какой браузер вы используете? Такое же поведение в других браузерах (firefox / chrome / safari / edige / ios / android)? Вы уверены, что изображение не загружается, пока вы не начнете прокрутку?
Можно ли создать небольшое репо для воспроизведения ошибки? Или записать гифку / видео?

У меня такая же проблема с Chrome, Firefox и Edge. Я использую [скрытый] (по умолчанию 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. Создайте свой собственный scrollObservable который объединяет события прокрутки и событие, изменяющее activeRecipeIndex (в вашем случае). Я могу помочь тебе с этим, если хочешь.

привет, @tjoskar, я вроде решил эту проблему с помощью [offset]=800 , но я не уверен, что это наиболее подходящий способ исправить это, как вы думаете?

Спасибо @tjoskar, работает :) Выбираю первый вариант :)