A way to lazy load images in ?

@jaybloke wrote:

I’ve built a simple photo gallery page which shows thumbnails of the photos in a grid. When the user clicks on a photo it presents a modal that shows the full-size image. The user can then swipe left or right to see the next images using .

My problem is that when the page containing the <ion-slides> is opened, it loads all of the images present in each <ion-slide>. This is not a problem with a handful of photos, however I could potentially have hundreds of photographs loading at the same time in no particular order resulting in a bad user experience.

Is there anyway I can change the behaviour so that only the current photo is loaded?

ion-slides.gif376x673 2.62 MB

Modal markup:

<ion-header>
  <ion-navbar>
    <ion-title>{{ title | translate }}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="dismiss()">{{ 'close' | translate }}</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-slides pager="true" [initialSlide]="initialSlide" paginationType="progress" zoom="true">
    <ion-slide *ngFor="let medium of media">
      <div class="swiper-zoom-container">
        <img [src]="medium.largeImage()">
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

Modal TS:

import { Component } from '@angular/core';
import { IonicPage, ViewController, NavParams } from 'ionic-angular';

// custom
import { Medium } from '../../models/medium';

@IonicPage()
@Component({
  selector: 'page-media-viewer',
  templateUrl: 'media-viewer.html',
})
export class MediaViewerPage {

  title: string;
  media: Medium[] = [];
  initialSlide: number;

  constructor(
    private viewCtrl: ViewController,
    private navParams: NavParams) {

    this.title = this.navParams.get('title');
    this.media = <Medium[]>this.navParams.get('media');
    let selected = <Medium>this.navParams.get('selected');
    this.setInitialSlide(selected);

  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

  private setInitialSlide(medium: Medium) {
    let index = this.media.indexOf(medium);
    this.initialSlide = index;
  }

}

Posts: 1

Participants: 1

Read full topic