lazyLoading for Slides not working

Ionic Framework ionic-v3
1

I am using the swiper options to set lazyLoading for images to true. Others options seem to work fine but all of the images are being downloaded when the page loads. I am trying to follow the swiper api docs for the correct settings and I think I have everything correct?

http://idangero.us/swiper/api/

mySlideOptions = {
    pagination: '.swiper-pagination',
    paginationClickable: false,
    preloadImages: false,
    lazyLoading: true,
    spaceBetween: 30
};

<ion-slides [options]=“mySlideOptions” pager>
<ion-slide *ngFor=‘let image of item.thumbnails’>
<img [src]=“image’”>

Any ideas on what I should do different to make this work? :disappointed_relieved:

2

Hey daimyo!

I have the same problem. Did you solve it already?

Or maybe someone else has a hint for me to get this working?

3

I am still waiting on this. I believe it is because the Swiper API is not yet fully implemented.

I think this issue covers this case. https://github.com/driftyco/ionic/issues/6198

Hope to find a solution to this soon!

4

Hm ok. Thanks for the response. If I find a solution by myself before it’s fixed I will share it here :slight_smile:

1 Like
5

Ok I’m not sure if this already helps you but I figured out that you need to use [attr.data-src] instead of data-src to use the lazyLoading. This is because Angular uses to check the data-src attributes in image tags if there is really an existing image and change it then to the normal “src” attribute.

I hope this will be enough to change in your code cause I changed so much the last days (using original swiper instead the implementation from ionic etc) that I didn’t check if this solution works too with the original implementation from Ionic.