Does not work with Perfect Scrollbar plugin.

[vugar005]

Hi
When page is first loaded the images are downloaded but when I scroll down the images are not downloading. Seems like event is not firing.

<div class="content d-flex flex-wrap"  style="position: relative">
       <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">
           </div>
           <div class="employeeInfo">
             <p>{{employee.name}}</p>
           </div>
         </div>
       </div>
     </div>
</div>

Angular version: 5.1.2
"ng-lazyload-image": "^3.4.2",
Hope you solve problem.
Thanks

[sapierens]

I set up a quick Angular 5 app, seems to be working fine for me - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

If your images are in a separate scroll container, you'll need to use scrollTarget. Please refer to API documentation or examples.

[tjoskar]

@vugar005, I see that your outer div has position: relative-style. Do you have a wrapper between this div and window with position: absolute?

[vugar005]

@sapierens @tjoskar. Thanks. Solved the issue by adding Scroll Target. But the plugin is not compatible with perfect scrollbar.
in 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>

Changed perfect scrollbar to div with overflow auto and it works as expected but I want to keep perfect scrollbar. So what I did is:
When I console this.scroll

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

So by assigning this.scroll to document.getElementById('main_content').children[0]; Problem is fully solved.
Thanks for help.

[tjoskar]

I have never used perfect-scrollbar but I guess you could use this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y') and then in your template:

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

[vugar005]

@tjoskar Unfortunately that did not work.
The only temp solution is to assign scrollTarget to
document.getElementById('main_content').children[0];

[tjoskar]

Can you create a small gitrepo/stackblitz/plnkr where you can reproduce the problem?

[vugar005]

okay I will add to stackblitz soon and share here.

[vugar005]

Please have a look at stackblitz demo:
https://stackblitz.com/edit/angular-wxyi2t

[sapierens]

I managed to get it to work like this - https://stackblitz.com/edit/angular-zovu45
I'm not sure if that's the best solution though.

It's also possible to solve it like @tjoskar suggested in #275 (comment), but you'd have to use perfect-scrollbar as a directive instead of a component for it to work (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage under DIRECTIVE USAGE).

[vugar005]

@sapierens Yes It works too. I use perfect scrollbar in almost every project. That's why it was import for me to get it work.Thanks.