我希望您可以帮助我进行故障排除。我有一个使用swiper的Angular 8应用程序。我已尝试实现延迟加载配置,以将图像延迟加载到swiper项中,但是它加载了所有图像,并且就像我对延迟加载没有配置任何东西一样工作。
请参见https://swiperjs.com/api/#lazy
我在typescript中的swiper配置是这个:
this.mySwiper = new Swiper('.swiper-container' {
//some configuration. Here it comes the important part
//...
watchSlidesVisibility : true,
preloadImages: false,
lazy: true,
breakpoints: {// Responsive
blablabla, more than 1 per view.
}
}
现在是html,在此我要指出我对每个项目都使用了一个组件,因此也许是导致它不起作用的原因:
<div class="swiper-container" [ngClass]="sliderConfig.name">
<div class="swiper-wrapper" *ngIf="!sourceImages"><!--A comprobation that really doesn't matter here-->
<div *ngFor="let model of models" class="swiper-slide">
<app-item [model]="model"></app-item>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"><img src="../../../../../assets/images/gallery/swiper-button.svg" alt="Next"></div>
<div class="swiper-button-prev"><img src="../../../../../assets/images/gallery/swiper-button.svg" alt="Prev"></div>
</div>
最后是item本身:
<div class="swiper-slide" (click)="viewproject()">
<div class="wrapper">
<img *ngIf="model" data-src="{{link}}" class="swiper-lazy"/>
<div class="swiper-lazy-preloader"></div>
</div>
</div>
它的行为就像我什么都没做,我的意思是,无论是否应该将图像加载到每个项目中,我尝试过删除缓存,但是(仍然)它以相同的方式工作。