Привет
Когда страница загружается впервые, изображения загружаются, но когда я прокручиваю вниз, изображения не загружаются. Похоже, событие не срабатывает.
`` ''
{{Имя сотрудника}}
`` ''
Угловая версия: 5.1.2
"ng-lazyload-image": "^ 3.4.2",
Надеюсь, вы решите проблему.
Спасибо
Я установил быстрое приложение Angular 5, похоже, у меня все работает нормально - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html
Если ваши изображения находятся в отдельном контейнере прокрутки, вам нужно будет использовать scrollTarget
. См. Документацию по примеры .
@ vugar005 , я вижу, что ваш внешний div имеет стиль position: relative
. У вас есть оболочка между этим div и окном с position: absolute
?
@sapierens @tjoskar. Спасибо. Решил проблему, добавив Scroll Target. Но плагин несовместим с идеальной полосой прокрутки.
в 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
Я не уверен, что это лучшее решение.
Также можно решить эту проблему, как @tjoskar, предложенный в https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681, но вам придется использовать perfect-scrollbar в качестве директивы вместо компонент для его работы (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage в DIRECTIVE USAGE ).
@sapierens Да, тоже работает. Я использую идеальную полосу прокрутки почти в каждом проекте. Вот почему мне было важно заставить его работать. Спасибо.