Oi
Quando a página é carregada pela primeira vez, as imagens são baixadas, mas quando eu rolar para baixo, as imagens não estão baixando. Parece que o evento não está disparando.
`` `
{{nome do empregado}}
`` `
Versão Angular: 5.1.2
"ng-lazyload-image": "^ 3.4.2",
Espero que você resolva o problema.
Obrigado
Eu configurei um aplicativo Angular 5 rápido, parece estar funcionando bem para mim - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html
Se suas imagens estiverem em um contêiner de rolagem separado, você precisará usar scrollTarget
. Consulte a documentação ou exemplos da API .
@ vugar005 , vejo que seu div externo tem o estilo position: relative
. Você tem um wrapper entre este div e a janela com position: absolute
?
@sapierens @tjoskar. Obrigado. Resolvido o problema adicionando Scroll Target. Mas o plugin não é compatível com a barra de rolagem perfeita.
em 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>
Barra de rolagem perfeita alterada para div com overflow automático e funciona como esperado, mas quero manter a barra de rolagem perfeita. Então o que eu fiz foi:
Quando eu consolo this.scroll
<perfect-scrollbar id="main_content" >
<div style="position:static" class="ps" ng-reflect-disabled=false> ... </div>
</perfect-scrollbar>
Portanto, atribuindo this.scroll a document.getElementById ('main_content'). Children [0]; O problema está totalmente resolvido.
Obrigado pela ajuda.
Nunca usei perfect-scrollbar
mas acho que você poderia usar this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y')
e, em seguida, em seu modelo:
<img [defaultImage]="'assets/icons/user.svg'"
[lazyLoad]="employee.imgUrl"
[useSrcset]="true"
[scrollObservable]="perfectScrollbar$">
@tjoskar Infelizmente isso não funcionou.
A única solução temporária é atribuir scrollTarget a
document.getElementById('main_content').children[0];
Você pode criar um pequeno gitrepo / stackblitz / plnkr onde pode reproduzir o problema?
ok vou adicionar ao stackblitz em breve e compartilhar aqui.
Por favor, dê uma olhada na demonstração stackblitz:
https://stackblitz.com/edit/angular-wxyi2t
Consegui fazer funcionar assim - https://stackblitz.com/edit/angular-zovu45
Não tenho certeza se essa é a melhor solução.
Também é possível resolvê-lo como @tjoskar sugerido em https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681, mas você teria que usar a barra de rolagem perfeita como uma diretiva em vez de um componente para que funcione (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage em USO DIRETIVO ).
@sapierens Sim, também funciona. Eu uso a barra de rolagem perfeita em quase todos os projetos. É por isso que foi importante para mim fazê-lo funcionar. Obrigado.