4

I hope you could help me with this troubleshooting. I have an Angular 8 application in which I use swiper. I have tried to implement the lazy load configuration in order to lazy load the images in the swiper items, but it loads all of them and works like I've configured nothing about lazy load.

See https://swiperjs.com/api/#lazy

My swiper configuration in typescript is this one:

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

Now, the html, in which I would like to point out that I use a component for each item, so maybe it's what makes it not working:

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

And finally, the item itself:

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

It behaves like I did nothing, I mean, it load the images in every single item, wether it should or not, and I've tried removing cache, but it still (doesn't) works the same way.

Nacho Guisado Obregón
  • 41
  • 1
  • 1
  • 5

2 Answers2

6

hi swiper not detecting changes property data-src={{link}} or [data-src]="link"

so use [attr.data-src]="link" worked for me :)

    <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>
hassan khademi
  • 1,156
  • 12
  • 14
0

Instead of: 

data-src="{{link}}"

You have to use:

attr.data-src="{{link}}"

Because that is the right syntax Angular is expecting. More info.

MartenCatcher
  • 2,713
  • 8
  • 26
  • 39
Ju Manja
  • 29
  • 3