Does not work with Perfect Scrollbar plugin.

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 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 https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment-356853681, 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 @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.