Ng-lazyload-image: Tidak berfungsi dengan plugin Perfect Scrollbar.

Dibuat pada 10 Jan 2018  ·  10Komentar  ·  Sumber: tjoskar/ng-lazyload-image

Hai
Ketika halaman pertama kali dimuat, gambar diunduh tetapi ketika saya menggulir ke bawah gambar tidak diunduh. Sepertinya acara tidak menyala.
```

{{nama karyawan}}

```
Versi sudut: 5.1.2
"ng-lazyload-image": "^3.4.2",
Harap Anda memecahkan masalah.
Terima kasih

Semua 10 komentar

Saya menyiapkan aplikasi Angular 5 cepat, tampaknya berfungsi dengan baik untuk saya - https://stackblitz.com/edit/angular-9guzc4?embed=1&file=app/app.component.html

Jika gambar Anda berada dalam wadah gulir terpisah, Anda harus menggunakan scrollTarget . Silakan merujuk ke dokumentasi atau contoh API .

@vugar005 , saya melihat bahwa div luar Anda memiliki position: relative -style. Apakah Anda memiliki pembungkus antara div dan jendela ini dengan position: absolute ?

@sapierens @tjoskar. Terima kasih. Memecahkan masalah dengan menambahkan Target Gulir. Tetapi plugin ini tidak kompatibel dengan scrollbar yang sempurna.
di 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>

Mengubah scrollbar sempurna menjadi div dengan overflow auto dan berfungsi seperti yang diharapkan tetapi saya ingin menjaga scrollbar sempurna. Jadi yang saya lakukan adalah:
Saat saya menghibur this.scroll

<perfect-scrollbar id="main_content"  >
   <div style="position:static"  class="ps" ng-reflect-disabled=false> ... </div>
</perfect-scrollbar>

Jadi dengan menetapkan this.scroll ke document.getElementById('main_content').children[0]; Masalah sepenuhnya terpecahkan.
Terimakasih atas bantuannya.

Saya tidak pernah menggunakan perfect-scrollbar tapi saya rasa Anda bisa menggunakan this.perfectScrollbar$ = Observable.fromEvent(document.getElementById('main_content'), 'ps-scroll-y') dan kemudian di template Anda:

<img [defaultImage]="'assets/icons/user.svg'"
     [lazyLoad]="employee.imgUrl"
     [useSrcset]="true"
     [scrollObservable]="perfectScrollbar$">

@tjoskar Sayangnya itu tidak berhasil.
Satu-satunya solusi sementara adalah menetapkan scrollTarget ke
document.getElementById('main_content').children[0];

Bisakah Anda membuat gitrepo/stackblitz/plnkr kecil tempat Anda dapat mereproduksi masalah?

oke saya akan segera menambahkan ke stackblitz dan membagikannya di sini.

Silakan lihat demo stackblitz:
https://stackblitz.com/edit/angular-wxyi2t

Saya berhasil membuatnya berfungsi seperti ini - https://stackblitz.com/edit/angular-zovu45
Saya tidak yakin apakah itu solusi terbaik.

Dimungkinkan juga untuk menyelesaikannya seperti yang disarankan @tjoskar di https://github.com/tjoskar/ng-lazyload-image/issues/275#issuecomment -356853681, tetapi Anda harus menggunakan perfect-scrollbar sebagai arahan alih-alih komponen agar berfungsi (https://github.com/zefoy/ngx-perfect-scrollbar#installing-and-usage di bawah DIRECTIVE USAGE ).

@sapierens Ya Ini juga berfungsi. Saya menggunakan scrollbar sempurna di hampir setiap proyek. Itu sebabnya saya mengimpornya untuk membuatnya berfungsi. Terima kasih.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat