时间戳

首页 > 解决方案 > Swiper 延迟加载不起作用（故障排除）

angular - Swiper 延迟加载不起作用（故障排除）

问题描述

我希望你能帮助我解决这个问题。我有一个使用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>

最后，项目本身：

<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>

它的行为就像我什么都没做，我的意思是，它在每个项目中加载图像，不管它是否应该，我已经尝试删除缓存，但它仍然（不）以相同的方式工作。

标签： angularweb-applicationslazy-loadingswiper

解决方案

嗨 swiper 没有检测到更改属性 data-src={{link}} 或 [data-src]="link"

所以使用[attr.data-src]="link"为我工作:)

    <div class="swiper-slide" >
        <div class="wrapper">
            <img *ngIf="model" [attr.data-src]="link" class="swiper-lazy"/>
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>

推荐阅读