Question

我使用的是ng-lazyload-image，链接是https://www.npmjs.com/package/ng2-lazyload-image1

当我将它与我的代码集成时，除了我发现列表只是水平滚动，它不能延迟加载图像，只有当你垂直滚动，图像将被加载，任何人都知道如何解决它

我的代码是：

<img [defaultImage]="'assets/img/productDefault.png'" [lazyLoad]="product.imageUrl" [scrollObservable]="container.ionScroll">

非常感谢。

Answer 1

@fmendoza在Ionic2 +和ng-lazyload-image（https://github.com/tjoskar/ng-lazyload-image/issues/158）内部有一个主要可行的水平滚动解决方案 - 通过[scrollTarget]="scroll1._scrollContent.nativeElement"绑定：

<ion-scroll scrollX="true" direction="x" #scroll1>
    <div class="item" margin *ngFor="let item of newItems" (click)="goToItemPage(item)">
        <img src="./assets/imgs/placeholder.png"
            [lazyLoad]="item.photoThumb?.url()" 
            [scrollTarget]="scroll1._scrollContent.nativeElement"
        />
        <div text-center text-wrap>
            <p no-margin>{{ (item.shortName || item.name) | excerpt:17 }}</p>
        </div>
    </div>
</ion-scroll>

Lazyload图像只能垂直发出侦听滚动事件

1 个答案: