Ng-lazyload-image: 不适用于 Perfect Scrollbar 插件。

我设置了一个快速的 Angular 5 应用程序，似乎对我来说工作正常 - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

如果您的图像位于单独的滚动容器中，则需要使用scrollTarget 。 请参阅API 文档或示例。

@vugar005 ，我看到您的外部 div 具有position: relative样式。 你在这个 div 和窗口之间有一个带有position: absolute的包装器吗？

@sapierens @tjoskar。 谢谢。 通过添加滚动目标解决了该问题。 但该插件与完美滚动条不兼容。
在 TS
this.scroll = document.getElementById('main_content');

<perfect-scrollbar id="main_content">
  <div class="content d-flex flex-wrap"  style="position: relative"  #sc>
         <div class="brick" *ngFor="let employee of employees">
           <div class="employeeBox animated zoomIn " [routerLink]="['/employees', employee.id]">
             <div class="employeePhoto">
               <img    [defaultImage]="'assets/icons/user.svg'"
                       [lazyLoad]="employee.imgUrl"
                       [useSrcset]="true"
                       [scrollTarget]="scroll"
               >
             </div>
             <div class="employeeInfo">
               <p>{{employee.name}}</p>
             </div>
           </div>
         </div>
       </div>
</perfect-scrollbar>

使用溢出自动将完美滚动条更改为 div 并且它按预期工作，但我想保持完美滚动条。 所以我所做的是：
当我安慰 this.scroll

<perfect-scrollbar id="main_content"  >
   <div style="position:static"  class="ps" ng-reflect-disabled=false> ... </div>
</perfect-scrollbar>

因此，通过将 this.scroll 分配给 document.getElementById('main_content').children[0]; 问题彻底解决。
感谢帮助。

我从来没有使用过perfect-scrollbar但我想你可以使用this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y')然后在你的模板中：

<img [defaultImage]="'assets/icons/user.svg'"
     [lazyLoad]="employee.imgUrl"
     [useSrcset]="true"
     [scrollObservable]="perfectScrollbar$">

@tjoskar不幸的是，这不起作用。
唯一的临时解决方案是将 scrollTarget 分配给
document.getElementById('main_content').children[0];

你能创建一个小的 gitrepo/stackblitz/plnkr 来重现问题吗？

好的，我会尽快添加到 stackblitz 并在这里分享。

请看一下 stackblitz 演示：
https://stackblitz.com/edit/angular-wxyi2t

我设法让它像这样工作 - https://stackblitz.com/edit/angular-zovu45
我不确定这是否是最好的解决方案。

也可以像https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681 中建议的@tjoskar 一样解决它，但是您必须使用 Perfect-scrollbar 作为指令而不是使其工作的组件（https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage 在DIRECTIVE USAGE 下）。

@sapierens是的，它也有效。 我几乎在每个项目中都使用完美的滚动条。 这就是为什么它对我来说很重要才能让它工作。谢谢。