Ng-lazyload-image: 加载出现在视口上的图像

那声音怪怪的。 您使用的是哪个版本的ng-lazyload-image ？ 你使用的是什么浏览器？ 这在其他浏览器（firefox/chrome/safari/edige/ios/android）中是否相同？ 您确定在开始滚动之前不会加载图像吗？
是否可以创建一个小的 repo 来重现错误？ 或录制 gif/视频？

我在 Chrome、Firefox 和 Edge 上遇到了同样的问题。 我在具有延迟加载图像的组件上使用 [hidden]（默认为 true）。
当 hidden 更改为 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它有效:) 我选择第一个选项:)