Is there an Image Loaded Event?



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:


            <Image loaded="callEvent()" src=""></Image>                

However, it did not work. Then I tried it with isLoaded="callEvent()", but it did not work either:

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:


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) {


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



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


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:


 <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 }}" />


function slikaUcitana(args){
    var page = args.object;
    console.log('slika je ucitana, argumenti: ', page);
        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?