CODEWITHSUNDEEP
angularionic2
Reza Mazarlou
Reza Mazarlou

Reputation: 3156

ionic 2 - show default image before original image is loaded

in ionic 2 application I create a list that each item of list have a image and I

want show default image before original image is loaded and I tray like this : 

<!--Item 1-->
  <div *ngFor="let c of category" class="list_item"  (click)="goToCategory(c.id,c.title)">
//default image
    <img  src="./assets/img/default.png" alt=""  [hidden]="loaded">
//original image
    <img   [src]="c.img" (load)="loaded = true"    alt="" >
    <div class="band_item">
      <h5 class="persian">{{c.title}}</h5>
      <span class="persian">{{c.description}}</span>
    </div>
  </div>

but loaded var in default image tag when initialize is undefine

Upvotes: 1

Views: 1848

Answers (1)

Reza Mazarlou
Reza Mazarlou

Reputation: 3156

I solve it with add (load) in default img tag like this :

<img  src="./assets/img/pre.png" alt="" (load)="loaded = false" [hidden]="loaded">

and use like this :

<!--Item 1-->
  <div *ngFor="let c of category" class="list_item"  (click)="goToCategory(c.id,c.title)">
    <img  src="./assets/img/default.png"  (load)="loaded = false" [hidden]="loaded">
    <img   [src]="c.img"  (load)="loaded = true"  alt="" >
    <div class="band_item">
      <h5 class="persian">{{c.title}}</h5>
      <span class="persian">{{c.description}}</span>
    </div>
  </div>

Upvotes: 2

Related Questions