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.
```
{{employee.name}}
```
Angular version: 5.1.2
"ng-lazyload-image": "^3.4.2",
Hope you solve problem.
Thanks
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.
@vugar005, I see that your outer div has position: relative
-style. Do you have a wrapper between this div and window with position: absolute
?
@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.
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$">
@tjoskar Unfortunately that did not work.
The only temp solution is to assign scrollTarget to
document.getElementById('main_content').children[0];
Can you create a small gitrepo/stackblitz/plnkr where you can reproduce the problem?
okay I will add to stackblitz soon and share here.
Please have a look at stackblitz demo:
https://stackblitz.com/edit/angular-wxyi2t
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).
@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.