أهلا
عند تحميل الصفحة لأول مرة ، يتم تنزيل الصور ولكن عند التمرير لأسفل لا يتم تنزيل الصور. يبدو أن الحدث ليس إطلاق نار.
""
{{اسم الموظف}}
""
الإصدار الزاوي: 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
. يرجى الرجوع إلى وثائق API أو الأمثلة .
@ vugar005 ، أرى أن position: relative
-style. هل لديك غلاف بين هذا div والنافذة بـ position: absolute
؟
تضمين التغريدة شكرا. تم حل المشكلة عن طريق إضافة 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 باستخدام ميزة الفائض التلقائي وهو يعمل كما هو متوقع ولكني أريد الاحتفاظ بشريط التمرير المثالي. إذن ما فعلته هو:
عندما أتحكم في هذا التمرير
<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
تمكنت من جعله يعمل على هذا النحو -
لست متأكدًا مما إذا كان هذا هو الحل الأفضل.
من الممكن أيضًا حلها مثل tjoskar المقترح في https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681 ، ولكن عليك استخدام شريط التمرير المثالي كتوجيه بدلاً من مكون لها للعمل (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage تحت الاستخدام المباشر ).
sapierens نعم إنه يعمل أيضًا. أستخدم شريط التمرير المثالي في كل مشروع تقريبًا. لهذا السبب كان من المهم بالنسبة لي أن أجعلها تعمل. شكرًا.