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.

Быстрый обходной путь - установить для атрибута смещения, например, значение 1, в результате чего будет возвращено значение intersectsWith true.

На самом деле это ошибка, этого быть не должно. Я открою для него отдельный выпуск.

Я закрываю это. Сообщите мне, что предложенное выше решение не сработало.