Is there an Image Loaded Event?

animation
images

#1

Hi!
I’m using Angular2 with Android.
Here’s what I’m trying to do: I want to

  1. load an image via URL
  2. when the image has been loaded, I want to fade it in

Therefore I need something (an Event?) to react on. I tried it with this one:

HTML

            <Image loaded="callEvent()" src="https://imageurl.com/image.png"></Image>                

However, it did not work. Then I tried it with isLoaded="callEvent()", but it did not work either:
https://docs.nativescript.org/api-reference/classes/ui_image.image#isloaded

So, is there a way in Angular2, to determine if the Image has been loaded, so a function can be called after that?

Thanks for your help! :slight_smile:


#2

You can listen for isLoadingChange event. isLoading is a property of image set to true when it starts loading and false when it finishes loading.

image.on("isLoadingChange", function (args) {
     console.log(args.value);
});

#3

“xlmnxp” from slack had the solution I was looking for. Turns out, I only forgot the parenthesis:

(loaded)="callThisFunctionAfterImageLoaded()"

#4

That’s good, I just thought you needed an event to listen that the image has finished loading.


#5

I am new to NativeScript (3 days only) and looking for same thing.
I did manage to show fade in on first image load and here is my example:
View:

<ListView.itemTemplate>
<StackLayout>

 <GridLayout columns="auto, *" route="browse/browse-page" title="Browse" itemTap="onNavigationItemTap">
   <Image row="0" col="0" loaded="slikaUcitana" class="lista-artikli-slika" id="slicice" opacity="0" stretch="aspectFit" src="{{ 'http://www.mydomain_IMAGE_LOCATION/' + slika_image }}" />
  </GridLayout>
                        
                        
 </StackLayout>
</ListView.itemTemplate>

JavaScript:

function slikaUcitana(args){
    var page = args.object;
    console.log('slika je ucitana, argumenti: ', page);
    page.getViewById("slicice").animate({
        opacity: 1,
        duration: 1000 
      });

}
exports.slikaUcitana = slikaUcitana;

Thing is when I scroll up and down, images get loaded again but no animation is shown/triggered. Any ideas?