Modal image loaded event

What is the best way to get the event for image loaded. I am using modal to load full size image and use scroll to view it. I need to get the image loaded event to close the loading animation. Can’t seen to find a way to do it. Thanks

This depends on how you’re loading the data.

If it’s coming from an observable you could do this:


//create your loading
this.nav.present(loading);

this.dataService.load().subscribe(
  // get the image and set the binding
  data => this.currentImg = data,
  // handle any erros
  err = > console.lo(err),
  // then since it's done, hide the loading
  loading.dismiss();
)

The image are pulled by observable as JSON. I show the thumbnails in grid. On click over on the thumb I open full size in scroll. Its the time it takes to load the image in modal that I need to show the loading animation.


Hmm, I don’t think there’s anything that can be done about that :thinking:

EDIT:

You could try

<img [src]="image.src" (load)="imageLoaded()"/> 
imageLoaded(){
  loading.dismiss();
}
5 Likes

Wohoo…
Yes that works like charm!. Thank you very much.

Vazad, how did you manage the landscape image to appear like a portrait image ? How do you crop the image ?

I am not cropping image. Its in zoom div.

Can you show me a part of your code ?

that works really fine until I want to load an image which has been loaded before (I guess cause it is “cached”). The loading will then not be dismissed. Is there any workaround to dismiss it then too?

Hmm so thats an interesting thing piece. So the event will fire, even if the image is coming from cache. But it happens so fast, that it happens before the view is fully rendered and any calls can be made.

Can you explain what you mean by “Zoom in div” ?

I meant I am using the ion-scroll.

So any solution to make to work on both pulling image from Interent and/or caches?

Any updates for this?

So any solution to make to work on both pulling image from Internet and/or caches?

@mhartington

Are there any suggestion to handle this?